如何将 `this` 的引用传递给使用功能组件的孩子？

Question

我正在努力将一些基于 class 的代码转换为函数式代码（并在此过程中学习函数式反应）。

我知道我可以将对组件 function 的各个变量的引用作为道具传递给孩子，但是在使用功能组件时是否有等效的<Child parentPage={this} /> ？

这个想法是子组件可以调用this.props.parentPage.updateValue() ，而不是需要执行this.props.updateValue() 。 我意识到在简单的父-> 子关系中实际上需要做更多的工作，但是当您发现自己几代人深入时，兄弟姐妹和堂兄弟姐妹都需要访问this.props.parentPage.* 。

Answer 1

听起来您想避免螺旋桨钻孔。 在不知道代码细节的情况下，很难说出最好的解决方案是什么，但很可能您可以为此使用上下文。

除此之外，您可以提取组件并将 JSX 作为子组件传递给它们。 或者只是不断地传递道具，有时这样也很好。