在用forwardRef

Question

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

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

我目前使用useRef和useImperativeMethods的方法是可行的，但是我不确定这是否是最佳实践，因为文档指出“与往常一样，在大多数情况下可以/应该避免使用引用的命令性代码案件。”

是否应该使用带有forwardRef的{​​{1}}的情况之一？

当前程序流程为：

• 在Child1a组件中设置属性值
• 通过Child1a => Child1 => App
，onSetProperty事件冒泡了
• App组件包含变量'const child2Ref = useRef（）'

• Child2定义为：

  const Child2 = forwardRef（（props，ref）=> {     useImperativeMethods（ref，（）=>（{         displayPropertyOption（value）{             console.log（useImperativeMethods）;         }     } ））;

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

Answer 1

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