javascript - react : modal with multiple link triggers

Question

刚接触 React，我想知道如何实现这种模式:

• DOM 中的模态窗口，在触发之前 Conceal 起来。
• 文档中的多个链接可以触发模态并将数据传递到其中。

这可能是您可以在自己的 Facebook 动态中找到的东西:只需在任何帖子上点击“分享”，您就会赢得一个很棒的模态。

不确定如何将其转化为 React 的“组件创建 DOM 子树”的方式？

触发组件将如何向看起来在 DOM 树中偏离的模态组件发送消息？

Answer 1

如果您使用的是 Flux 风格的架构，这可以通过 Store 很好地实现。

假设您有一个名为 MyModalStore(或 ShareModalStore，或任何模态)的商店。该商店包含模态内容所需的所有数据，以及是否应显示它。

这是一个简化的商店，它跟踪模态是否可见以及标题是什么:

MyModalStore.js

var _visible = false;
var _modalTitle;

var MyModalStore = {
    isModalVisible: function() {
        return _visible;
    },
    getModalTitle: function() {
        return _modalTitle;
    }
};

MyModalStore.dispatchToken = Dispatcher.register(function(payload) {
    var action = payload.action;
    switch (action.type) {
        case 'SHOW_MODAL':
            _visible = true;
            _modalTitle = action.modalTitle;
            MyModalStore.emitChange();
            break;

        case 'HIDE_MODAL':
            _visible = false;
            MyModalStore.emitChange();
            break;
    }
});

module.exports = MyModalStore;

然后，想要显示模态的组件会触发带有 modalTitle 的 'SHOW_MODAL' 操作，并且模态组件本身会监听存储更改以了解何时显示本身。

您可以在 facebook/flux on github 上的示例项目中看到这种通量模式.

如果不使用 flux，我猜你会在你的模块层次结构中提供一个回调，这样任何人都可以点击回调来显示模态，并将其委托(delegate)给顶层的实际模态组件。对于较大的应用程序，这不是一个很好的方法，因此我建议使用通量方法。

我们发表了一些 store helper code here , 但还有很多其他的 libraries and examples out there as well .