传递道具孙子父

Question

我有以下React.js应用结构：

<App /> 
    <BreadcrumbList> 
    <BreadcrumbItem /> 
    <BreadcrumbList/> 
<App /> 

的问题是，当我点击<BreadcrumbItem />，我想在<App />

我用的回调改变的状态把道具传给<BreadcrumbList/>，但那是我得到的。 有没有任何pattaren如何轻松地将道具传递给强制树？

我怎样才能通过道具<App />，没有做任何回调链？

Answer 1

如果你正在做简单的东西那么它往往只是更好地向上穿过组件层次传递状态的改变，而不是创建一个特定的商店为目的（无论它可能是）。我会做到以下几点：

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组件父.....

<BreadcrumbItem embiggenToggle={this.props.embiggenToggle}> 

...并高达应用程序，然后用它来设置状态....

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; 

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

Answer 2

如果使用流量模式，你可以有一个AppStore的这听一个BREADCRUMB_CLICK事件。所以当你点击一个BreadCrumbItem时，你可以执行一个动作，调度BREADCRUMB_CLICK事件。当AppStore处理该事件时，他通知App组件更新您的状态。

欲了解更多信息：

Flux architecture