Условно добавить элемент на основе prop

Question

Как вы можете условно добавить элемент, как у меня внизу? Я хочу только <div className='next-field__connected-wrapper'> быть в пределах, если верно withFilter.

render: function() { 
    if (this.props.withFilter) { 
     return (
     <div> 
      <div className='next-card next-card__section next-card__section--no-bottom-spacing'> 
      <div className='next-field__connected-wrapper'> 
       { this.props.children } 
      </div> 
      </div> 
     </div> 
    ) 
    } else { 
     return (
     <div> 
      <div className='next-card next-card__section next-card__section--no-bottom-spacing'> 
      { this.props.children } 
      </div> 
     </div> 
    ) 
    } 
    } 

Answer 1

Имейте в виду, что JSX элементами являются объекты JavaScript, и вы можете назначить их переменным и передавать их вокруг, как и любой другой:

render: function() { 
    let inner = this.props.children; 

    if (this.props.withFilter) { 
    inner = (
     <div className='next-field__connected-wrapper'> 
     {inner} 
     </div> 
    ); 
    } 

    return (
    <div> 
     <div className='next-card next-card__section next-card__section--no-bottom-spacing'> 
     {inner} 
     </div> 
    </div> 
); 
}