Let's imagine that we have component Foo that render component Bar inside, that render component Qux inside.
We have structure Foo > Bar > Qux.
How to interact with Qux when render Foo?
This may be required, when component Qux are atomic and we need to update its view or behavior, like set CSS class or get ref and interact with DOM node, or even to override some props, to make special view.
Overview possible solutions
Currently we can't do it. Let's think how to implement it. We have at least 2 ways to do it - react context and props drilling.
With react context we can define context beside each component, use this context inside component and override context on high levels. The problems that potentially may occurs is necessary to clear context, to avoid problem when in case we will render a tree Foo > Bar > Qux > Qux, we will override props for both Qux instead of only one.
We can also use props drilling with container like that <Foo di={{Qux: {ref, className, ariaLabel: 'Text'}}}/> where di property will be handled by each component and forward down by each component. The problem i see is that we delegate to each component to forward container, so we add unnecessary heavy responsibility; in case any component will not forward the container down - the chain will be broken and we can't get access to necessary component.
Let's imagine that we have component
Foothat render componentBarinside, that render componentQuxinside. We have structureFoo>Bar>Qux.How to interact with
Quxwhen renderFoo?This may be required, when component
Quxare atomic and we need to update its view or behavior, like set CSS class or get ref and interact with DOM node, or even to override some props, to make special view.Overview possible solutions
Currently we can't do it. Let's think how to implement it. We have at least 2 ways to do it - react context and props drilling.
With react context we can define context beside each component, use this context inside component and override context on high levels. The problems that potentially may occurs is necessary to clear context, to avoid problem when in case we will render a tree
Foo>Bar>Qux>Qux, we will override props for bothQuxinstead of only one.We can also use props drilling with container like that
<Foo di={{Qux: {ref, className, ariaLabel: 'Text'}}}/>wherediproperty will be handled by each component and forward down by each component. The problem i see is that we delegate to each component to forward container, so we add unnecessary heavy responsibility; in case any component will not forward the container down - the chain will be broken and we can't get access to necessary component.