从 React 子功能组件获取状态答案

【问题标题】：Getting state from React child functional component从 React 子功能组件获取状态
【发布时间】：2020-11-18 20:12:31
【问题描述】：

我是 React 新手。

我有两个功能组件：父级和子级。我需要从父级访问子级状态，但仅在单击父级组件中的某个按钮时。子组件使用 useState 挂钩维护自己的状态。我不想将任何回调从父组件传递给子组件，以避免在父组件中复制子状态。

我以为我可以在父使用 useRef 钩子中创建一个子引用，然后使用 ref.current 访问子属性，但这似乎不可能。

【问题讨论】：

如果你不喜欢使用回调（这听起来很有意义，tbh），React 约定将是“提升状态”（将状态移动到父级），或者使用更复杂的全局状态选项，上下文位于父母和孩子之上。
react 中的数据流是从上到下的方向，而不是你想要的相反方向。如果父组件需要，您应该移动父组件中的状态并将状态的相关部分传递给子组件
正如我所提到的，我不想在父组件中维护子状态，因为我有许多父组件重用同一个子组件。此外，对于常见的 OO 模式，这似乎非常违反直觉：子应使用自己的状态进行封装，而父应在父需要时通过某种公共方法获取子状态。
我发现如果我将子功能组件转换为从 React.Component 派生的 react 类，那么我可以为这个子组件设置一个 ref 并调用它的绑定方法或通过这个 ref 直接访问它的状态.但是如果孩子是功能组件，似乎没有办法做到这一点。

标签： reactjs

【解决方案1】：

您不能通过引用访问组件的状态。
而且我认为除了将回调函数传递给孩子以同步状态外，没有其他办法。但我建议您将状态存储在父级中并在那里更改它然后将其作为道具传递给子级，它还可以防止状态重复。

【讨论】：

问题是子组件是可重用的，并且有 10 个不同的父组件使用它。我不想在所有 10 个父母中复制代码来维护同一个孩子的状态。子状态实际上被封装在子组件本身内部。这似乎是很常见的 OO 模式。
哦明白了。你可以创建一个自定义钩子并在任何你想要的地方使用它。但是没有办法提升状态或复制（:)它。