Question

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

问题是我可以将渲染的组件放入存储器中，或者磁通存储器应该只保留简单的哈希值吗？

在助焊剂模式中做到这一点的正确方法是什么？

我应该在哪里呈现此组件？动作创建者是否有效？

非常感谢任何阅读推荐。

Answer 1

您的商店应该仅限于特定于型号的数据。我建议将组件保留在渲染功能中，然后根据商店中设置的变量选择如何渲染它。类似的东西：

export default class ModalComponent extends Component {

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

    render() {
        let modal;

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

        return modal;
    }
}

Answer 2

商店仅用于组件的状态。在您的情况下，您将组件本身传递给存储，而不考虑反应通量中的最佳实践。 Flux基于emit事件和调度操作。如果要动态创建组件，请发出事件。

我可以将渲染的组件放入flux存储中吗？

2 个答案: