当我调用嵌套式React组件中作为prop传递的函数时会发生什么？

Question

我试图了解React中嵌套道具的工作方式。 如果我的组件A是组件B的父级，而组件B是组件C的父级。
A向B提供了道具foo()，B向C提供了从A获得的道具foo()。

我在C内部呼叫foo()。会发生什么？

1）C的foo()呼叫B的foo()，而A的foo()
2）C的foo()与A的foo()相同，因为它是A的foo()

Answer 1

想象一下，在组件A中您有一个函数foo

foo(string) {
    console.log(string)
}

然后在A中渲染组件B并通过foo作为道具

<ComponetB foo={this.foo}/>

与B

相同

<ComponetC foo={this.foo}/>

并在组件C中调用

this.props.foo('hey')

这将调用组件A函数，该函数将创建一个console.log('hey')

您可以将foo传递给您想要的组件数量的道具，它将执行父组件（A）中的内容。

如果您要将某些东西传递给许多嵌套组件，则可以使用React Context API。 Context API会将值作为道具传递给您的所有子组件。您应该阅读文档以了解更多信息。