将道具从孙辈传递给父母

如果您正在做一些简单的事情，那么通常最好将状态更改通过组件层次结构传递，而不是专门为此目的创建存储（不管它可能是什么）。我将执行以下操作：

面包屑项目

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}>

…并转到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;

我希望这有帮助。感谢您的支持。