javascript - 在 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 不会呈现虚假值，无论是组件还是属性(如 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