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;

然后，想要顯示模態的組件使用modalTitle觸發'SHOW_MODAL'操作，並且模態組件本身偵聽存儲更改以了解何時顯示自身。

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

如果不使用flux，我猜你會在模塊層次結構中提供一個回調，這樣任何人都可以點擊回調來顯示模態，並將其委托給頂層的實際模態組件。 對於大型應用來說，這不是一個很好的方法，所以我推薦使用flux方法。

我們在這里發布了一些商店幫助代碼 ，但是還有很多其他庫和示例 。