ReactJs

Question

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

我的 React 应用程序有嵌套组件，目前这是头重脚轻的问题。我想在单击 tabLink 组件时关闭对话框。

天窗的标记应该放在哪里？

我的天窗可以有商店和动作吗？我可以广播到哪个？

更新：我可以通过直接从我的组件调用它的操作来关闭天窗对话框吗？

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

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

能否在tabLink组件中直接调用这里的action:

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

在商店中，您想要一个 set/get 的 hideSkyLight。在监听商店的组件中 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 组件在调用之前不会呈现。这可以提高性能。

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

ReactJs - how to fire dialog using reflux

javascript

refluxjs