有没有更好的方法来与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 <显示onRequestClose如何工作。

编辑：噢，瑞安佛罗伦萨，你使用写了这个给我的情态动词应该如何工作模态的创造者：https://gist.github.com/ryanflorence/fd7e987c832cc4efaa56