我有以下React.js应用程序结构:
<App />
<BreadcrumbList>
<BreadcrumbItem />
<BreadcrumbList/>
<App />
问题是,当我单击时<BreadcrumbItem />
,我想在其中更改状态<App />
我使用回调将道具传递到,<BreadcrumbList/>
但是那是我走了多远。是否有pattaren如何轻松地将道具传递到要素树上?
如何在<App />
不进行任何回调链接的情况下将prop传递给?
如果您正在做简单的事情,那么通常最好将状态更改通过组件层次结构传递,而不是专门为此目的创建存储(无论它可能是什么)。我将执行以下操作:
面包屑项目
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;
我希望这有帮助。感谢您的支持。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句