将道具从孙辈传给 parent

Question

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

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

问题是，当我点击 <BreadcrumbItem /> 时，我想更改 <App />

中的状态

我使用回调将道具传递给 <BreadcrumbList/> 但这就是我的进展。有没有 pattaren 如何轻松地将道具传递给组件树？

如何在不进行任何回调链接的情况下将 prop 传递给 <App />？

Answer 1

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

更多信息：

Flux architecture

Answer 2

如果您正在做一些简单的事情，那么通常最好通过组件层次结构向上传递状态的变化，而不是专门为此目的创建一个商店（无论它是什么）。我会做以下事情：

面包屑项

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;

这个例子切换了一个简单的布尔值，但是你可以放弃任何你喜欢的东西。希望对您有所帮助。

我还没有对此进行测试，但它是（很快）从一个实时工作示例中提取出来的。

编辑：根据要求，我将对模糊的内容进行扩展："you can pass up anything".

如果您正在制作基于数组的导航菜单并且需要将所选项目传递给父项，那么您将执行以下操作

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;

希望对您有所帮助。感谢您的支持。

将道具从孙辈传给 parent

Passing props from grandchildren to parent

javascript

flux

reactjs