有没有更好的方法用react.js实现对话框?

Question

我需要一个对话框在我的反应项目，但我找不到一个好的方法来实现它。我已经搜索了其他的实现，比如react-modal-dialog, react-modal。

但我不认为他们做得最好，最令人困惑的部分是封装。

以react-modal为例:

var App = React.createClass({
  getInitialState: function() {
    return { modalIsOpen: false };
  },
  openModal: function() {
    this.setState({modalIsOpen: true});
  },
  closeModal: function() {
    this.setState({modalIsOpen: false});
  },
  render: function() {
    return (
      <div>
        <button onClick={this.openModal}>Open Modal</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onRequestClose={this.closeModal}
          style={customStyles} >
          <h2>Hello</h2>
          <button onClick={this.closeModal}>close</button>
          <div>I am a modal</div>
          <form>
            <input />
            <button>tab navigation</button>
            <button>stays</button>
            <button>inside</button>
            <button>the modal</button>
          </form>
        </Modal>
      </div>
    );
  }
});

上面的代码显示了Modal的使用方法，但是您可以发现，每次时，我们必须自己定义onRequestClose 。我知道原因是Modal可以被自己或者它的父视图关闭。

但是我想知道，在父视图中调用Modal.close()是否更好(因为封装)?如果是这样，能否介绍一下具体实施情况?

Answer 1

我制作了自己的模态组件，因为我不喜欢它们的完成方式。要记住的关键是，应该尽可能少地使用状态。你能传递的东西越多越好。正确的方法是从父组件(或通量存储库)传入模态。如果您想查看实现，请查看组件的源代码。https://github.com/rackt/react-modal/blob/master/lib/components/ModalPortal.js L156 & lt;显示onRequestClose的工作原理。

编辑:哦，是的，Ryan Florence，你正在使用的模态的创造者写了这个给我关于模态应该如何工作:https://gist.github.com/ryanflorence/fd7e987c832cc4efaa56