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

Question

我是回流新手，我正在尝试找出触发我的react-skylight 对话的最佳方式....

我的 react 应用程序有嵌套组件，目前这是非常重的。当我的 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>

Answer 1

在商店中，您想要一套/获得 hideSkyLight。在监听 store 的组件中 setState({hideSkyLight: store.getHideSkyLight()}).

    render: function() {
        var hideSkyLight = this.state.hideSkyLight;
        return (
            <ShowSkyLight hide={hideSkyLight}/>
        )
    }

在你的组件 ShowSkyLight;

    render: function() {
        if (this.props.hide) return null;
        return (
            <SkyLight ref="myModal" title="TITLE FOR MODAL" showOverlay={true}>Modal With Overlay</SkyLight>
        )
    }

这种模式的一个优点是 SkyLight 组件在被调用之前不会被渲染。这可以提高性能。