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

Question

I'm working to convert some class based code over to functional (and learning functional react along the way).

I know that I can pass references to individual variables of a component function as props to children, but is there a <Child parentPage={this} /> equivalent when using functional components?

The idea being that then a child component could call this.props.parentPage.updateValue() , instead of needing to do this.props.updateValue() . I realize that's actually more work in a simple parent -> child relationship, but when you find yourself a few generations deep, with siblings and cousins all needing to access this.props.parentPage.* .

Answer 1

Sounds like you want to avoid prop drilling. Without knowing the details of your code, it's hard to say what the best solution would be, but most likely you coulduse context for this .

Other than that, you could extract components and pass JSX as children to them . Or just keep passing the props, sometimes that's fine.