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

是的，我知道 - ＆＃34;预览＆＃34;默认情况下是不可见的，因为它是一个图像，但我想知道是否有其他方法可以达到我想要的效果：使用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

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

在React中渲染另一个组件

2 个答案: