Question

我在反应项目中需要一个对话框，但我找不到实现它的好方法。我搜索了其他实现，例如react-modal-dialog，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是如何工作的。

编辑：哦，是的，你正在使用的模式的创造者瑞安·佛罗伦斯写了这个关于模态应该如何工作的信息：https://gist.github.com/ryanflorence/fd7e987c832cc4efaa56

有没有更好的方法来实现react.js的对话框？

1 个答案: