如何在 React 中将数据从孙子组件传递给父组件？

Question

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

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

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

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

参见 CreateRate 组件，其中：

• CreateRate.jsx 是父级
• InputField.jsx 是子元素
• DataFetchModal.jsx 是孙子
• Airports.jsx 是孙辈

Answer 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