在React中渲染另一个组件

Question

当状态改变时，React触发componentDidUpdate()方法，然后我做：

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

如您所见，我在更改特定状态时呈现SubmitButton ，但我的问题是：这是完成此功能的最佳行为吗？

我的情况是：我正在上传照片。 当input[type=file]被更改时，我创建一个新的state属性，然后触发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不会渲染虚假值，无论是组件还是属性（如Preview案例中），例如

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

呈现给

<div></div>
<img/>

因此，通常您只需创建一个变量并有条件地为其分配一个组件或null，如另一个答案中所建议的那样：

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

- 或简单 -

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

在组件变大的情况下，通常具有用于渲染该部件的子例程的可读性和清洁性

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

Answer 2

是。 如果在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>
  )
}