Рендер компонент внутри другого в React

Question

Когда состояние изменяется, React Триггеры componentDidUpdate() метод, а затем я:

componentDidUpdate: function() { 
    React.render(new SubmitButton, $('.uploader-submit').get(0)); 
} 

Как вы видели, я рендеринга SubmitButton когда определенное состояние изменяется , но мой вопрос: это лучшее поведение, чтобы получить эту функцию?

Мой сценарий: Я закачаю фотографию. Когда изменяется номер input[type=file], я создаю новое свойство состояния, а затем запускается componentDidUpdate(), ссылаясь на SubmitButton.

Это мой render() метод:

render: function() { 
    return (
    <div className="uploader"> 
     <header className="uploader-header"> 
     <div className="uploader-actions pull-left"> 
      <div className="uploader-submit"></div> 
      <CancelButton router={this.props.router} /> 
     </div> 

     <UploadButton callback={this.imageSelectedCallback} /> 
     </header> 

     <Preview imageUri={this.state.imageUri} /> 
    </div> 
) 
} 

Не могу я сделать что-то вроде <Preview /> компонента? Я имею в виду, он есть, но что-то появляется, когда this.state.imageUri отличается от null. Это реализация Preview:

var Preview = { 
    render: function() { 
    return (
     <img src={this.props.imageUri} /> 
    ) 
    } 
}; 

module.exports = React.createClass(Preview); 

Да, я знаю - «Предварительный просмотр» невидим по умолчанию, потому что это изображение, но я хочу знать, если есть другой подход, чтобы достичь того, что я хочу: показать что-то основано на состоянии, используя метод render.

Answer 1

React не оказывает falsy значения, будь то компонент или атрибут (например, в случае Preview), например,

<div>{null}</div> 
<img src={null} /> 

оказывает

<div></div> 
<img/> 

Так обычно вы просто создать переменную и условно присвоить ему компонент или нуль, как это было также предложено в другой ответ:

var button = null; 
if(myConditionForShowingButton) { 
    button = <SubmitButton />; 
} 

- или просто -

var button = myConditionForShowingButton ? 
    <SubmitButton /> : 
    null; 

В тех случаях, когда компонент становится больше, он обычно более читабельным и более чистым, чтобы иметь подпрограмму для ее части

var complexComponent = condition ? 
    this.renderComplexComponent() : 
    null 

Answer 2

Да. If-Else in JSX.

render: function() { 
    var submitButton; 
    if (this.state.imageSelected) 
    submitButton = <SubmitButton />; 

    return (
    <div className="uploader"> 
     <header className="uploader-header"> 
     <div className="uploader-actions pull-left"> 
      <div className="uploader-submit">{ submitButton }</div> 
      <CancelButton router={this.props.router} /> 
     </div> 

     <UploadButton callback={this.imageSelectedCallback} /> 
     </header> 

     <Preview imageUri={this.state.imageUri} /> 
    </div> 
) 
}