将道具从孙辈传递给父母 [英] Passing props from grandchildren to parent
问题描述
我具有以下React.js应用程序结构:
I have following React.js application structure:
<App />
<BreadcrumbList>
<BreadcrumbItem />
<BreadcrumbList/>
<App />
问题是,当我单击<BreadcrumbItem />
时,我想更改<App />
The problem is, when I click on <BreadcrumbItem />
, I want to change a state in <App />
我使用回调将道具传递给<BreadcrumbList/>
,但这就是我走了多远.
有没有pattaren如何轻松地将道具传递到要素树上?
I used callback to pass props to <BreadcrumbList/>
but that`s how far I got.
Is there any pattaren how to easily pass props up to compenent tree ?
如何在不进行任何回调链接的情况下将prop传递给<App />
?
How can I pass prop to <App />
, without doing any callback chaining ?
推荐答案
如果您正在做简单的事情,通常最好将状态更改通过组件层次结构传递,而不是专门为此目的创建商店(无论如何)可能是).我将执行以下操作:
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 ;
当通过BreadcrumbList组件将其传递给父级时.....
THEN pass it up to the parent through the BreadcrumbList component.....
<BreadcrumbItem embiggenToggle={this.props.embiggenToggle}>
...和UP到App,然后使用它来设置状态....
... and UP to App, then use it to set the state....
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.
根据要求,我将继续模糊地说明:您可以放弃任何东西".
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.
这篇关于将道具从孙辈传递给父母的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!