有沒有更好的方法來與react.js實現對話？

我在我的反應項目中需要一個對話框，但我找不到實現它的好方法。我已經搜索了其他實現，例如react-modal-dialog，react-modal。有沒有更好的方法來與react.js實現對話？

但我不認爲他們做的最好的方式，最令人困惑的部分是封裝。

以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()（因爲封裝）更好嗎？如果是這樣，你能否給我更多的實施細節？

來源

2015-09-26 Shin

我做了自己的模態組件，因爲我不喜歡它們是如何完成的。關鍵要記住的是，你應該儘可能少地使用狀態。你越能將道具傳遞給更好的人。正確的方法是從父級（或磁通存儲）傳入模態。如果您想查看實現，請查看組件的來源。 https://github.com/rackt/react-modal/blob/master/lib/components/ModalPortal.js#L156 <顯示onRequestClose如何工作。

編輯：噢，瑞安佛羅倫薩，你使用寫了這個給我的情態動詞應該如何工作模態的創造者：https://gist.github.com/ryanflorence/fd7e987c832cc4efaa56

來源

2015-09-26 23:56:31 zackify

謝謝您的回答。在閱讀要點後，我知道這個問題是關於非宣佈和宣佈狀態之間的折衷。要點的其他部分也是有道理的，也許我已經找到了重建我的對話框的方法:) – Shin

有沒有更好的方法來與react.js實現對話？

回答

相關問題