使用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。