如何将数据从孙子传递到 React 中的父组件？答案

【问题标题】：How to pass data from grandchild to parent component in React?如何将数据从孙子传递到 React 中的父组件？
【发布时间】：2021-06-10 23:52:51
【问题描述】：

我有一个表单（父），其中包含一个输入字段（子），它从一个显示为模态（孙子）的参考表（Grand-grand-child）中获取其值，通过单击打开附加到输入字段的按钮。这是一个嵌套结构，大致如下：

我需要通过在引用表中选择一行并使用“SET VALUE”按钮确认我的选择来设置输入字段的值，这意味着我需要将数据从 Grand-grand-child 向上传递三个级别到父母通过孙子和孩子。

我的状态保存在父组件中。有没有一种简单的方法可以在不使用外部库的情况下实现这一目标？请提供使用 Hooks 的解决方案，因为我的所有组件都是功能组件。

这里是代码：https://codesandbox.io/s/festive-fast-jckfl

请参阅 CreateRate 组件，其中：

CreateRate.jsx 是父级
InputField.jsx 是孩子
DataFetchModal.jsx 是孙子
Airports.jsx 是孙子

【问题讨论】：

只需将状态设置器函数从父级一直传递到孙子级。在 GGC 内部，创建另一个状态来保存当前选定的行。将上面提到的父函数附加到“设置值”按钮，单击时，用当前选定的行调用它。如果你展示了一些代码，那么演示它是微不足道的。
我已经添加了我的代码。我不明白的是我是否需要通过中间的其他组件将回调函数调用从 GGC 传递给 P 以及每个组件中的函数调用是否应该相同或不同？如果我只向 Modal (GC) 上的按钮添加回调函数调用，该按钮如何知道 Table (GGC) 中的值已被选中？
您不会备份任何函数。您只需调用从父级向下级联的函数的引用。小菜一碟。您现在需要明确的是您的表格行是如何选择的？每行是否有一个复选框或一个选择按钮。我知道有那个“设置值”按钮，但是在单击确认按钮之前如何选择一行？
我正在使用具有 clickToSelect 属性的 BootstrapTable 库，该属性为我提供了我可以在选择时传递回来的行道具。那不是问题。我没有得到的是如何在从表格（GGC）选择行到模态按钮（GC）并从那里到表格（父）时获得这些道具。你能扩展一下吗？
如果不向您展示所需的更改，就很难解释它。您是否有机会将至少一个基本版本的应用程序放入 Codesandbox.io？只需使用一些硬编码的样本数据。我敢打赌，我可以在 5 分钟内完成它。我需要很长时间才能从头开始整合。

标签： reactjs react-hooks components

【解决方案1】：

将更改处理函数从父级（状态所在的位置）传递给孙级。单击“设置值”按钮时，孙子应调用此更改处理程序。

如果这是太多的道具钻孔

先查看组件构成
如果这不起作用，请查看上下文 api

更新：您提到您的问题是试图从您的孙子访问孙子内部的状态。在这种情况下，您可以将状态提升（到孙子）。这意味着将“机场”提升到 DataFetchModal。这里有更多关于提升状态的信息。

https://reactjs.org/docs/lifting-state-up.html#lifting-state-up

此外，您似乎遇到了这些问题，因为您的代码非常嵌套并且不是非常可组合。我建议研究如何更好地分解组件。实现此目的的一种方法是使用复合组件。

https://kentcdodds.com/blog/compound-components-with-react-hooks

确定如何更好地分解这一点需要一些时间。但是，只是简单地看一下。您也许可以将您的 DataFetchModal 移动到您的父级。将回调传递给 InputField 以将其触发并发送识别参数（输入调用它的内容）。然后，从父级，使用组合在任何模态体中组合。看来您在 DataFetchModal 中有一个查找对象 (objType)。也许这可以通过使用组合来解决（不确定，可能是单独的主题）。

更新 2： 我拉下了您的代码沙箱并进行了一些可能有助于访问父级状态的更改。我将模态移到父级中。看看吧。

https://github.com/nathanielhall/Test

【讨论】：

SET VALUE 按钮不是 Grand-grand-child 的一部分。它是 Grand-child 的一部分（比 Grand-grand-child 高一级）。
知道了！对不起，我完全错过了。我查看了您的代码，据我所知，您应该能够简单地提升状态。在这种情况下，“机场”。这对你有用吗？
再次阅读您的帖子后，我不确定您是否可以简单地将状态提升到模态。如果没有，那么我建议更好地分解组件（请参阅我的更新）。如果您将代码放入代码沙箱或类似的代码中，我可以为您提供更好的帮助。
您的第一个链接是 React.js 官方 dox，它只描述了类组件，而我的是功能性的。我将研究将模态移动到父级的第二个选项。但这将需要对已经正常工作的代码进行过多的重写。我希望我能够从父级访问机场中的状态......
类和函数组件提升状态的思想是一样的。这是反应如何工作的基础。您不能直接在子级中访问状态。您可以传递函数来操作子组件内部的状态，但要“访问状态”，您必须将其取出