反应条件渲染模式

Question

我已经实现了一个Modal组件，该组件在屏幕上显示一个模态对话框。通常，模态将有条件地显示。我可以通过两种方法在render函数中执行此操作：

render(){
    ...
    <Modal show={this.state.showModal}>
        // something in modal
    </Modal>
}

在Modal组件中，我使用this.props.show为其自身添加了一个不同的类。如果为假，它将添加display：none以隐藏模式。

另一种方式是这样的：

render(){
    ...
    { this.state.showModal &&
        (<Modal>
            // something in modal
        </Modal>)
    }
}

这用于showModal确定是否在渲染中添加Modal。

我想找出的是：

1. 这两种方式有何不同？
2. 其中一个比另一个更好吗？
3. 还有另一种方法吗？

编辑：似乎不同的人有不同的偏好。对我自己而言，我更喜欢@ErikTheDeveloper所说的内容。显示/隐藏模态的功能应保留在模态内部，并且当我们不需要显示模态时，可以在模态中返回null。

我认为也许还没有哪个更好的答案。也许这只是个人选择？

Answer 1

从那时起，我在React上度过了很多时间，并在此过程中吸取了一些教训。

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

• show：布尔-模态可见吗？
• close：功能-模态需要回调才能关闭自身
• children：节点-模态的内容

请参阅React
Docs以获取有关受控组件的信息

要回答有关两者之间的区别的问题，是IMO选项1提供了更清洁，更灵活的API来使用，而选项2则更加简化。

使用选项1时，您可以使用CSS
或null从返回，以进行隐藏/显示<Modal>。我建议返回，null因为模态内容将不会被渲染，而是通过CSS渲染和“隐藏”它们。

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

为什么要传递close道具/回调？

考虑到大多数模态具有用户体验，例如关闭事件，例如：按下[ESC]，单击“ x”，在模态之外单击等…需要通过传递close道具通知模态如何“自行关闭”
/ 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>
    );
  }
});

而且，如果您想让模态管理自己的状态，则可以使用稍微更聪明的组件来包装“哑巴”模态，并使用refs和“公共组件方法”（尽管我发现坚持使用简化方法通常会减少头痛和后悔;））

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

您可以通过多种方式来包装简单的代码<Modal>，但是我觉得它可以作为坚实的基础，并且数据流可以很好地发挥作用，以允许从最有意义的地方计算/得出“模式开放”。这是我发现很好工作的方法。