我可以把渲染組件放入磁通存儲器嗎？

我嘗試基於react-bootstrap Modal組件爲我的應用程序創建通用模態組件。我可以把渲染組件放入磁通存儲器嗎？

目標是在應用程序中使其成爲唯一，以便能夠在沒有模態重開的情況下交換模態體，例如，登錄/忘記/註冊表單。

我有喜歡的東西

export default class ModalComponent extends Component { 
    handleMyFluxStoreChange() { 
     this.setState({ 
      modalBody : this.modalStore.getModalBody(), 
      modalShow: this.modalStore.getModalToggle() 
     }); 
    } 

    render() { 

     <Modal show={this.state.modalShow}> 
      {this.state.body} 
     </Modal> 
    } 
}

這與標量的偉大工程，但問題是流量模式莫代爾成分：

我應該如何把模態的身體，整個組件？

從技術上講這不是一個問題，我可以做這樣的行動的創建者

export const showLoginModal =() => { 

    let modalBody = (<LoginModal />); 

    AppDispatcher.dispatch({ 
     type: MODAL_CHANGE, 
     payload: { 
      body: modalBody 
     } 
    }) 
};

現在的問題是，我可以把渲染的成分在不斷變化的存儲，或磁通店應該只保留簡單的哈希？

什麼是正確的方式來做它的流量模式？

我應該在哪裏渲染這個組件？行動創造者對此有效嗎？

任何閱讀推薦將非常感激。

來源

2017-01-18 George Novik

您的商店應該僅限於模型特定的數據。我會建議將組件保留在渲染函數中，然後根據商店中設置的變量選擇如何渲染它。喜歡的東西：

export default class ModalComponent extends Component { 

    handleMyFluxStoreChange() { 
     this.setState({ 
      showLoginModal: this.modalStore.getLoginModalVisibility() 
     }); 
    } 

    render() { 
     let modal; 

     if (this.state.showLoginModal) { 
      modal = <LoginModal />; 
     } 

     return modal; 
    } 
}

來源

2017-01-18 18:57:09

感謝您的回覆。有了這個問題，我將不得不爲每個想要呈現的新組件更新模態組件。我正在尋找解決方案，使其在這方面透明。 –

在這種情況下，除了你已經實現的 –

商店僅用於組件的狀態。在你的情況下，你傳遞組件本身來存儲哪些不考慮反應流量的最佳實踐。 Flux基於排放事件和調度行爲。如果要動態創建組件，請發送事件。

來源

2017-01-19 07:50:01

謝謝以外，我無法真正想到其他任何解決方案。我應該在哪裏處理這個事件並創建組件以保持模態組件的透明？ –

我可以把渲染組件放入磁通存儲器嗎？

回答

相關問題