在使用 forwardRef 定义的子组件中调用函数答案

【问题标题】：Calling functions in child components defined with forwardRef在使用 forwardRef 定义的子组件中调用函数
【发布时间】：2019-06-07 22:08:41
【问题描述】：

                                      App  [4]
                                       |
                     ___________________________________
                    |                                   |
                  Child1   [3]                        Child2  [5]
                    |                                   |
                  Child1a  [2]                function displayProperty()  [6]
                    |
            function onSetProperty()  [1]

我刚刚开始学习 React，并试图在不使用 Redux 状态管理的情况下了解组件之间的内置通信通道。在子组件上调用函数时，任何人都可以提供一些关于最佳实践的指导吗？

我目前使用 useRef 和 useImperativeMethods 的方法有效，但我不确定这是否是最佳做法，因为文档声明“与往常一样，在大多数情况下可以/应该避免使用 ref 的命令式代码。”

这是应该使用forwardRef 和useImperativeMethods 的情况之一吗？

目前的程序流程是：

在 Child1a 组件中设置属性值
onSetProperty 事件通过 Child1a => Child1 => App 冒泡
App 组件包含一个变量 'const child2Ref = useRef()'
Child2 定义为：

const Child2 = forwardRef((props, ref) => { useImperativeMethods(ref, () => ({ 显示属性选项（值）{ 控制台.log(The value is ${value}); } } ));

https://reactjs.org/docs/hooks-reference.html#useimperativemethods

【问题讨论】：

使用 React 构建 UI 的第一步是永远不要在后代上调用“函数”。你的父组件应该只关心它的直接子组件，并通过更新 props 来规范它们的行为。如果您需要调用他们的 API 函数，那么您混合模型的方式可能会给您自己和其他必须处理您的代码的人造成混淆。有下游某处的数据吗？放下它，并继续这样做，直到它碰到正确的组件。或者使用数据管理器/路由器（例如，通过共享管理器轻量级，通过 redux 实现超重度等）

标签： reactjs

【解决方案1】：

您总是希望您的状态处于所需/可能的最高组件级别。要修改该状态或在子组件中显示它，请将状态变量和函数（修改该状态）本身传递给调用给定函数。

【讨论】：