Использование 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> 
     ); 
    } 

Если это ужасная идея, может ли кто-нибудь сказать мне, что это лучший способ сделать это в реактиве?

Answer 1

Как уже отмечалось в некоторых комментариях к ОП, вы можете использовать , но это действительно не так.

Лучшим решением, вероятно, является передача prop в использование вашего компонента или наличие флага в состоянии вашего компонента - затем используйте этот флаг prop/flag для рендеринга.

псевдокод:

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') 
); 

... что-то li ke это. Это чрезмерно упрощенный пример (не проверенный, так что будьте осторожны с синтаксическими ошибками), но это должно помочь объяснить мой мыслительный процесс.

---

В качестве альтернативы, можно использовать метод componentDidMount() на классе.

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

, а затем в render() проверки против this.state.someProp.