如何将值从 child of child 传递给 parent？

How to pass values to parent from child of child?

我有一个 parent 组件，有一个 child，它还有一个 child。

Parent
|-Child One (child of parent)
  |-Child Two (child of child)

当在 child 两个中定义一个值时，我使用回调将该值传递给 child 一个，但我也想将相同的值传递回 parent.不幸的是，使用类似的回调似乎有两个抛出标识符已被声明的错误。

请查看沙盒以了解我是如何尝试实现它的。

CodeSandbox

我该怎么做？

因为 props 的名字和你的函数名是一样的所以更新函数名 onValueTwoPass

因为你创建的函数与prop同名

只需更新 ChildOne.js 文件中的函数名称

你可以在这里查看Sandbox

因为 ChildTwo 组件需要更新其父组件 ChildOne 和 grand-parent App。这可以通过两种方式完成。

一种方法是，您在 ChildOne 中创建另一个状态并将其状态函数 setValueTwo 与 App 状态函数 valueTwoPass 一起传递给 ChildTwo . ChildTwo 现在可以设置父值和 grand-parent。

  1. Example

第二种方法是，你不要在ChildOne中创建另一个状态。因为，您需要为父组件和 grand-parent 组件显示相同的值，您可以像这样

将状态值 valueTwo 传递给 ChildOne 
<ChildOne valueOnePass={valueOnePass} valueTwoPass={valueTwoPass} valueTwo={valueTwo} />

当ChildTwo更新grand-parent的状态值App时，valueTwo也在ChildOne中改变，因为App也在传递valueTwo作为道具。

然后只需在 ChildOne 中使用 valueTwo 变量，而不是创建新状态并传递给 ChildTwo。

  1. Example