[英]Passing props from grandchildren to parent
I have following React.js application structure: 我有以下React.js应用程序结构:
<App />
<BreadcrumbList>
<BreadcrumbItem />
<BreadcrumbList/>
<App />
The problem is, when I click on <BreadcrumbItem />
, I want to change a state in <App />
问题是,当我点击<BreadcrumbItem />
,我想在<App />
更改状态
I used callback to pass props to <BreadcrumbList/>
but that`s how far I got. 我使用回调将道具传递给<BreadcrumbList/>
但这就是我得到了多远。 Is there any pattaren how to easily pass props up to compenent tree ? 有没有pattaren如何轻松地将道具传递给竞争树?
How can I pass prop to <App />
, without doing any callback chaining ? 如何在不进行任何回调链接的情况下将prop传递给<App />
?
If you are doing something simple then its often just better to pass the change in state up through the component hierarchy rather than create a store specifically for that purpose (whatever it may be). 如果您正在做一些简单的事情,那么通常最好通过组件层次结构传递状态更改,而不是专门为此目的创建存储(无论它是什么)。 I would do the following: 我会做以下事情:
BreadcrumbItem BreadcrumbItem
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 ;
THEN pass it up to the parent through the BreadcrumbList component..... 然后通过BreadcrumbList组件将其传递给父级.....
<BreadcrumbItem embiggenToggle={this.props.embiggenToggle}>
... and UP to App, then use it to set the state.... ...和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;
This example toggles a simple boolean however you can pass up anything you like. 此示例切换一个简单的布尔值,但您可以传递任何您喜欢的内容。 I hope this helps. 我希望这有帮助。
I have not tested this but it was (quickly) ripped from a live working example. 我没有对此进行过测试,但它已经(很快)从实际工作示例中删除了。
EDIT: As it was requested i'll expand upon the vague: "you can pass up anything". 编辑:根据要求,我将扩大模糊:“你可以放弃任何东西”。
If you were making a navigation menu based on an array and needed to pass up the selected item to a parent then you would do the following 如果您正在制作基于数组的导航菜单,并且需要将所选项目传递给父级,那么您将执行以下操作
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;
You would then do the following in the parent: 然后,您将在父级中执行以下操作:
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;
I hope this helps. 我希望这有帮助。 Thanks for the upvote. 谢谢你的upvote。
If you use Flux pattern, you can have a AppStore which listen a BREADCRUMB_CLICK event. 如果您使用Flux模式,您可以拥有一个监听BREADCRUMB_CLICK事件的AppStore 。 So when you click on a BreadCrumbItem, you can execute an action which dispatch BREADCRUMB_CLICK event. 因此,当您单击BreadCrumbItem时,您可以执行分派BREADCRUMB_CLICK事件的操作。 When AppStore handle the event, he inform App component which update your state. 当AppStore处理事件时,他会通知App组件更新您的状态。
For more informations: 有关更多信息:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.