使用jQuery的內部陣營渲染功能

Question

我有以下陣營渲染功能：

render: function() { 
     return (
      <Popup onClose={this.props.onClose}> 
       <Form entity="strategy" edit="/strategies/edit/" add="/strategies/add/"> 
        <h2>Create/Edit Strategy</h2> 
        <StrategyForm pending={this.state.pending} formData={this.state.data} /> 
        <div className="col-md-6"> 
         <Assisting /> 
        </div> 
       </Form> 
      </Popup> 
     ); 
    } 

我想使H2的標題是基於人體類，所以我的問題是...我可以做這個？

render: function() { 
     return (
      <Popup onClose={this.props.onClose}> 
       <Form entity="strategy" edit="/strategies/edit/" add="/strategies/add/"> 
        if ($('body').hasClass("this")) { 
        <h2>Create This Strategy</h2> 
        } else { 
        <h2>Create Another Strategy</h2> 
        } 
        <StrategyForm pending={this.state.pending} formData={this.state.data} /> 
        <div className="col-md-6"> 
         <Assisting /> 
        </div> 
       </Form> 
      </Popup> 
     ); 
    } 

如果這是一個可怕的想法，有人能告訴我什麼是在React中做到這一點的更好方法嗎？

Answer 1

正如在OP的一些評論中已經注意到的那樣，你可以用來做，但它並不是真正的「反應」方式。

更好的解決方案可能是將prop傳遞到組件的使用中，或者在組件的狀態上有一個標誌 - 然後使用該prop /標誌進行渲染。

僞代碼：

render() { 
    return (
     if (this.props.someProp) { 
      <h2>Create this Strategy</h2> 
     } else { 
      <h2>Create this Strategy</h2> 
     } 
    ); 
} 

組件中的方法IMO使用jQuery是罰款（例如componentDidMount()或其他事件/實用方法），但通常你會希望避免這種情況的render()。 React組件的全部目的都是維護狀態，所以像你的例子那樣，jQuery的即時使用會挫敗這個想法。

---

比方說，比如你渲染您的組件是這樣的：

ReactDOM.render(<MyComponent />, document.getElementById('some-div')); 

您可以通過屬性來您的組件：

ReactDOM.render(
    <MyComponent someProp={true} />, 
    document.getElementById('some-div') 
); 

或者你的情況：

ReactDOM.render(
    <MyComponent someProp={$('body').hasClass("this")} />, 
    document.getElementById('some-div') 
); 

...東西李那個。這是一個過於簡化的例子（未經測試，因此要小心語法錯誤），但這應該有助於解釋我的思維過程。

---

或者，您可以在班級中使用componentDidMount()方法。

componentDidMount() { 
    this.setState({ 
     someProp : $('body').hasClass("this") 
    }); 
} 

然後在render()檢查this.state.someProp。