将道具从孙子传递给父母

Posted 2023-02-22

【中文标题】将道具从孙子传递给父母

【英文标题】：Passing props from grandchildren to parent

【发布时间】：2015-08-12 09:18:56

【问题描述】：

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

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

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

我使用回调将道具传递给<BreadcrumbList/>，但这就是我的目标。 有没有什么模式可以轻松地将道具传递给组件树？

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

【问题讨论】：

我可以推荐你 This 链接很好地解释了你的问题

【参考方案1】：

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

面包屑项

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 通过 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;

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

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

---

编辑： 根据要求，我将扩展模糊的内容：“您可以传递任何东西”。

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

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;

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

【讨论】：

如果此评论有用，请点赞，我正在努力增加我的 SO 代表，任何帮助或反馈将不胜感激。谢谢。

谢谢，这个答案很有帮助:)

你能解释一下如何传递点击的面包屑的值，例如 id 吗？

更新：还值得补充的是，当您在组件树上上下传递内容时，这通常是开始考虑状态容器的点，Redux 是最常用的在撰写本文时做出反应。

更新 2：值得指出的是，最近这里已经更全面地回答了这个问题（基于 ES6 和 createClass 的示例）：***.com/questions/38394015/…

【参考方案2】：

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

更多信息：

Flux architecture