在 React 中渲染一个组件中的另一个组件

Render a component within another in React

本文关键字：组件 一个 另一个 React      更新时间：2023-09-26

当状态发生变化时，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 方法根据状态显示某些内容。

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

是的。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>
  )
}
相关文章：