如果您正在做一些简单的事情,那么通常最好通过组件层次结构向上传递状态更改,而不是专门为此目的创建一个存储(无论它是什么)。我会做以下事情:
面包屑项目
var React = require('react/addons');
var BreadcrumbItem = React.createClass({
embiggenMenu: function() {
this.props.embiggenToggle();
},
render: function() {
return (
<div id="embiggen-sidemenu" onClick={this.embiggenMenu} />
);
}
});
module.exports = BreadcrumbItem ;
然后通过 BreadcrumbList 组件将其传递给父级......
<BreadcrumbItem embiggenToggle={this.props.embiggenToggle}>
...然后UP到App,然后用它来设置状态....
var React = require('react/addons');
var App = React.createClass({
embiggenMenu: function() {
this.setState({
menuBig: !this.state.menuBig
});
},
render: function() {
return (
<div>
<BreadcrumbList embiggenToggle={this.embiggenMenu} />
</div>
)
}
});
module.exports = BreadcrumbItem;
这个例子切换了一个简单的布尔值,但是你可以放弃任何你喜欢的东西。我希望这有帮助。
我还没有测试过这个,但它(很快)从一个实时工作示例中删除了。
编辑:
根据要求,我将扩展含糊的内容:“你可以放弃任何东西”。
如果您正在制作基于数组的导航菜单并且需要将所选项目传递给父项,那么您将执行以下操作
var React = require('react/addons');
var ChildMenu = React.createClass({
getDefaultProps: function () {
return {
widgets : [
["MenuItem1"],
["MenuItem2"],
["MenuItem3"],
["MenuItem4"],
["MenuItem5"],
["MenuItem6"],
["MenuItem7"]
]
}
},
handleClick: function(i) {
console.log('You clicked: ' + this.props.widgets[i]);
this.props.onClick(this.props.widgets[i]);
},
render: function() {
return (
<nav>
<ul>
{this.props.widgets.map(function(item, i) {
var Label = item[0];
return (
<li
onClick={this.handleClick.bind(this, i)}
key={i}>
{Label}
</li>
);
}, this)}
</ul>
</nav>
);
}
});
module.exports = ChildMenu;
然后,您将在父级中执行以下操作:
var React = require('react/addons');
var ChildMenuBar = require('./app/top-bar.jsx');
var ParentApp = React.createClass({
widgetSelectedClick: function(selection) {
//LOGGING
//console.log('THE APP LOGS: ' + selection);
//VARIABLE SETTING
var widgetName = selection[0];
//YOU CAN THEN USE THIS "selection"
//THIS SETS THE APP STATE
this.setState({
currentWidget: widgetName
});
},
render: function() {
return (
<ChildMenu onClick={this.widgetSelectedClick} />
);
}
});
module.exports = ParentApp;
我希望这有帮助。感谢您的投票。