您的第一个示例始终呈现模态，但使用 CSS 来隐藏/显示它。

您的第二个示例仅在显示时将模态插入到 DOM 中，否则它根本不会显示在 DOM 中。

我宁愿不渲染它，除非它是可见的（第二个例子），但我认为这两种方式都不重要。第二个例子现在也有更少的props，所以模态组件更简单。

答案在于Modal组件的实现。我希望它的render方法是使用showprops来正确优化标记。您应该优化它以消除大部分未显示的标记。

为什么？ 在 Modal 中实现优化简化了它的使用，其他组件必须不知道/打扰渲染它的成本。

编辑：因为我们使用的是 React，所以在 v-dom 中拥有一个虚拟 Modal 组件的成本与其 dom 标记的成本相比可以忽略不计。因此，即使您的其他组件最终在其 v-dom 中使用 show=false 保留 Modal，也没关系。

我也更喜欢第二种方法。尽管 React 最大限度地减少了在 DOM 中添加额外元素的负面影响，但不渲染不应该渲染的元素始终是一个好习惯。我会扩展这种想法并提取在单独的函数中显示/隐藏模态的逻辑并在渲染中调用它。

render: function(){
   ...
   {this.renderModal()}
},
renderModal: function(){
    ...
    {this.state.showModal && (<Modal />)}
}

这使您可以灵活地在单个位置添加附加条件，并使渲染函数保持较小且易于理解。

不久前我回答了一个与打开/关闭模态的最佳方式有关的类似问题

从那以后，我花了很多时间在 React 上，并在此过程中学到了一些经验教训。

我发现这种通用方法可以很好地处理模态：使用一个完全控制的“哑”组件，它需要 3 个props。

• show: Boolean - 模式是否可见？
• close: Function - 模态需要回调才能关闭自身
• 孩子：节点 - 模态的内容

有关受控组件的信息，请参阅 React 文档

要回答您关于两者之间区别的问题，IMO 选项 1 提供了一个更简洁、更灵活的 API，而选项 2 则更简约。

对于选项1你可以采取隐藏的护理/通过使用CSS显示或返回null的<Modal>。我建议返回，null因为与通过 CSS 渲染它们和“隐藏”它们相比，模式内容将不会被渲染。

选项 2 强制条件渲染的更冗长的“JSX 方式”，我认为这在许多情况下是合适的。但是我觉得模态的概念值得隐藏/显示成为<Modal>组件 API（props/方法/等...）的一部分

为什么要传递closeprops/回调？

考虑到大多数模态都有 UX，例如关闭事件，例如：按 [ESC]、单击“x”、单击模态外等……需要通过传递closeprops来通知模态如何“关闭自身” /callback 在我下面的例子中。

代码示例

// The simple, fully controlled Modal component
const Modal = React.createClass({
  render() {
    const {
      show,     // Boolean - Is the modal visible?
      close,    // Function - The modal needs a function to "close itself"
      children, // node - The contents of the modal 
    } = this.props;
    return !show ? null : (
      <div className="some-class-for-styling">
        <a onClick={close}>x</a>
        {children}
      </div>
    );
  }
});

const UsesModal = React.createClass({
  setEditing(editing) {
    this.setState({editing});
  },

  render() {
    // `editing` could come from anywhere. 
    // Could be derived from props, 
    // or managed locally as state, anywhere really....
    const {editing} = this.state;
    return (
      <div>
        <h1>Some Great Component</h1>
        <a onClick={() => this.setEditing(true)}>Show Modal!</a>
        <Modal show={editing} close={() => this.setEditing(false)}>
          Some great modal content... show based on UsesModal.state.editing
        </Modal>
      </div>
    );
  }
});

如果你想让模态管理它自己的状态，你可以用一个稍微聪明的组件来包装“哑”模态，并使用引用和“公共组件方法”（尽管我发现坚持使用简化的方法通常会减少头痛和后悔；))

const SmarterModal = React.createClass({
  close() {
    this.setState({show: false});
  },

  open() {
    this.setState({show: true});
  },

  render() {
    const {children} = this.props;
    const {show} = this.state;
    return (
      <Modal show={show} close={this.close}>
        {children}
      </Modal>
    );
  }
});

const UsesSmarterModal = React.createClass({
  render() {
    return (
      <div>
        <h1>Some Great Component</h1>
        <a onClick={() => this.refs.my_smarter_modal.open()}>Show Modal!</a>
        <SmarterModal ref="my_smarter_modal">
          Some great modal content... show based on SmarterModals own internal state
        </SmarterModal>
      </div>
    );
  }
});

有很多方法可以结束 simple <Modal>，但我觉得它可以作为一个坚实的基础，并且数据流很好地允许从最有意义的任何地方计算/推导“是模态开放”。这是我发现效果很好的方法。