Question

我是新手，我正试图找出触发react-skylight对话框的最佳方法....

我的反应应用程序有嵌套组件，目前非常重。我想在单击tabLink组件时触发对话框。

我应该把标记放在我的天窗上？

我的天窗可以有商店和动作吗？我可以广播进去吗？

更新：我可以直接从我的组件调用其动作来启动我的天窗对话吗？

如果我拉出对话框的操作：

DialogAction = require('../partials/actions/DialogAction');

我可以直接调用tabLink组件中的操作：

mixins: [Reflux.connect(TabLinkStore)],

onShowDialog:function(){
   DialogAction.onShowDialog();
},

对话操作：

var Reflux = require('reflux');

var DialogAction = Reflux.createActions([
"showDialog"
]);


module.exports = DialogAction;

否则，我是否认为天窗组件需要在每个组件中需要触发？

我想保持天窗分离，视图干净。

Tablink组件：

var TabLink = React.createClass({
contextTypes: {
    router: React.PropTypes.func
},

mixins: [Reflux.connect(TabLinkStore)],

getTabClass: function () {
    return this.props.isActive ? "active_on" : "";
},

getLinkNode: function() {
    if (this.props.link) return <a href={this.props.link} >{this.props.label}</a>;
    return <Link to={this.props.route} >{this.props.label}</Link>;
},

render: function () {
    if (this.props.clearBasket) return TabLinkAction.ShowDialog(id, function(isSelected) {
        checkbox.checked = isSelected;
    });
    return (
        <li className={this.getTabClass()}>
            {this.getLinkNode()}
        </li>
    );
}
});

module.exports = TabLink;

商店：

var React = require('react'),
Reflux = require('reflux'),
TabLinkAction = require('../actions/TabLinkAction'),
skylight  = require('react-skylight');

var TabLinkStore = Reflux.createStore({

listenables: TabLinkAction,
onShowDialog: function(){
        // show dialog here?
}

});

module.exports = TabLinkStore;

动作：

var Reflux = require('reflux');

var TabLinkAction = Reflux.createActions([
"ShowDialog"
]);


module.exports = TabLinkAction;

需要射击的天窗：

<SkyLight ref="myModal" title="TITLE FOR MODAL" showOverlay={true}>Modal With Overlay</SkyLight>

ReactJs - 如何使用回流触发对话

0 个答案: