我是回流的新手,我正在尝试找出触发我的反应天窗对话框的最佳方法....
我的 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>