Что происходит, когда я вызываю функцию, переданную в качестве реквизита во вложенных компонентах React?

Question

Я пытаюсь понять, как работают вложенные реквизиты в React.Если у меня есть компонент A, который является родителем компонента B, который является родителем компонента C.
A дает B реквизит foo(), B дает C реквизит foo(), полученный от A.

Я звоню foo() внутри С. Что происходит?

1) C's foo() вызывает B's foo(), который вызывает A's foo()
2) C's foo() действует так же, как A's foo(), потому что это A's 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 .Контекст API передаст значение всем вашим дочерним компонентам в качестве реквизита.Вы должны прочитать документацию, чтобы узнать больше об этом.