React:具有多个链接触发器的模态

Question

对React来说很新,我想知道如何实现这个模式:

• DOM中的模态窗口,隐藏起来直到触发.
• 文档中的多个链接可以触发模态并将数据传递给它.

这是你可以在你自己的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;

然后，想要显示模态的组件会'SHOW_MODAL'使用 a 触发一个操作modalTitle，模态组件本身会侦听存储更改以了解何时显示自己。

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

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

我们在这里发布了一些存储帮助程序代码，但也有很多其他库和示例。