React:具有多个链接触发器的模态 [英] React: modal with multiple link triggers

查看:122
本文介绍了React:具有多个链接触发器的模态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

非常新的React,我想知道如何实现这种模式:




  • DOM中的模态窗口,隐藏直到触发。 / li>
  • 文档中可以触发模态并将数据传递到其中的多个链接。



这是您可以在自己的Facebook Feed中找到一些东西:只需点击任何帖子中的分享即可赢得梦幻般的模态。



不知道你会怎么样将其转化为React的组件创建DOM子树的方式?



触发组件如何在DOM树中显示似乎偏离的模态组件?

解决方案

如果您使用的是Flux风格的架构,可以通过商店实现这一点。



想像你有一个商店称为 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' b $ b _visible = false;
MyModalStore.emitChange();
break;
}
});

module.exports = MyModalStore;

然后,要显示模态的组件发起一个'SHOW_MODAL' / code>动作与 modalTitle ,模态组件本身侦听商店更改以知道何时显示。



您可以在 Facebook / flux on github 上的示例项目中看到此通量模式。 p>

没有使用flux,我猜你会在模块层次结构中提供一个回调,以便任何人都可以点击回调来显示模态,并将它们委托给实际的模态组件顶级。对于较大的应用程序来说,这不是一个好办法,所以我建议使用通量方法。



我们发布了一些这里存储帮助代码,但还有很多其他库和示例以及


Very new to React, I was wondering how to implement this pattern:

  • Modal window in DOM, hidden away until triggered.
  • Multiple links in document that can trigger the modal and pass data into it.

This is something you can probably find on your very own Facebook feed: just click 'share' on any post and you'll win a fantastic modal.

Not sure how you'd translate this into React's "components create DOM subtrees" way of things?

How would the triggering component message the modal component which would seem to be way off in the DOM tree?

解决方案

If you are using a Flux-style architecture, this can be achieved nicely with a Store.

Imagine you have a store called MyModalStore (or ShareModalStore, or whatever the modal is). The store contains all the data needed for the modal content, as well as whether or not it should be displayed.

Here is a simplified store that keeps track of whether the modal is visible, and what the title is:

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;

Then the components that want to show the modal fire a 'SHOW_MODAL' action with a modalTitle, and the modal component itself listens for store changes to know when to show itself.

You can see this flux pattern in example projects on facebook/flux on github.

Without using flux, I guess you would provide a callback down your module hierarchy so that anyone can hit the callback to show the modal, and that is delegated to the actual modal component at the top-level. This isn't a great approach for larger applications, so I'd recommend the flux approach.

We published some store helper code here, but there are a lot of other libraries and examples out there as well.

这篇关于React:具有多个链接触发器的模态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆