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

Question

我想了解 React 中的嵌套 props 是如何工作的。如果我有一个组件 A，它是组件 B 的父组件，而组件 B 是组件 C 的父组件。
A 给 B 一个 prop foo()，B 给 C 从 A 那里得到的 prop foo()

我在 C 中调用 foo()。会发生什么？

1)C 的 foo() 调用 B 的 foo()，B 调用 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 会将一个值作为道具传递给您的所有子组件。您应该阅读文档以了解更多信息。

What happens when I call a function passed as props in nested React components?