从另一个孩子访问孩子的状态？

Posted 2023-02-23

【中文标题】从另一个孩子访问孩子的状态？

【英文标题】：Accessing child's state from another child?

【发布时间】：2020-08-12 17:15:04

【问题描述】：

我有一个带有两个子组件的父组件。

<Parent>
    <Child1 />
    <Child2 />
</Parent>

Child1 有一个 textarea 并利用 useState 将 textarea 的值设置为 state；编辑器，setEditor。

Child2 有一个按钮，单击时我想在 Child1 中获取编辑器的值。

我最好的做法是什么？

我已经尝试创建一个新的上下文来包装我的 Parent 容器，但我仍在为如何真正获得编辑器值而苦苦挣扎。

我的另一个想法是将 useState 推送到父级并将道具向下传递到 Child1 ——但这意味着每次在 Child1 的文本区域中按下一个键时我的父组件都会重新渲染。

【问题讨论】：

将状态移至父级

【参考方案1】：

lifting state up 解决了这个问题。

在 React 中，共享状态是通过将其向上移动到最近的位置来完成的 需要它的组件的共同祖先。这就是所谓的 “提升状态”。

除非确实需要担心，否则不要担心父组件会重新渲染。

【参考方案2】：

您必须将状态从 child1 提升到父级，然后您可以将其作为道具传递给您拥有的所有子级。希望你能理解