javascript - What is parent-child coupling in react and how does it relate to context? -

i reading context > parent-child coupling documentation of react. unable parent-child coupling documentation. typically line :

by passing down relevant info in menu component, each menuitem can communicate containing menu component.

the code is:

<menu>   <menuitem>aubergine</menuitem>   <menuitem>butternut squash</menuitem>   <menuitem>clementine</menuitem> </menu> 

as article mentions, data flow in react typically done passing props parent child component. however, in cases prop sharing can become tedious, , in these cases, we'd use context.

the example in document describes how continually threading color prop become annoyance, in cases you'd utilize context when prop chain deeper 2 or 3 levels. better example might store in redux.

for instance, use redux, don't implement react-redux, must access store context. now, let's have nested component (grandchildren of grandchildren), , needs access store - well, can either:

1. pass store down via props. however, means intermediary component doesn't need access store must have prop nonetheless in order pass on child somewhere below require it. adding bulk , boilerplate.
2. attach store context @ high level component. result child component specifies contexttypes within have access context, , therefore store. doing so, don't have worry injecting intermediary component unnecessary props, since can access context.

keep in mind, context opt-in, therefore components explicitly specify contexttypes have access context, if 1 defined above it.

using props

parent (passes props store property) | +-> props -> child            |            +-> props -> grandchild                         |                         +-> props -> great-grandchild                                       |                                      +-> render() -> this.props.store.getstate().message   

using context

parent (defines childcontexttypes store property) | + -> child      |      + -> grandchild           |           + ->  great-grandchild (opts-in defining contexttypes store property)                 |                 +-> render() -> this.context.store.getstate().message   

update (with reference this question posted jmm):

what api referring to?

my understanding refers ability parent components store functions on context, can accessed , invoked child components, thereby creating scoped api.

what mean: each menuitem can communicate containing menu component.

per above, if function declared on context, , menuitem opted-in via contexttypes obtain function, menuitem invoke it, thereby communicating component.