我可以把渲染组件放入磁通存储器吗？

我尝试基于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

谢谢以外，我无法真正想到其他任何解决方案。我应该在哪里处理这个事件并创建组件以保持模态组件的透明？ –

我可以把渲染组件放入磁通存储器吗？

回答

相关问题