Is there a way to retrieve the component tree of all descendant of a specific component in React?
I mean something similar to what the React developer tools visualize in the "Components"- tab:
This should specifically include not only children and children of children etc., but also components that are nested in the sense that component A might return an instance of component B.
Why do I want this? I have a From component that takes care of different sorts of validation of the descending input components on submit. For this is would be ideal to be able to iterate over its descendants and then perform some of the required logic. This works nicely whenever all descendants are children or children-of-children... but breaks when other forms of composition are used.
More concretely, in the following example, the goal would be a method that finds all the inputs A-E from within the Form component. For A-D this is simple by recursively going over children, but I have no real idea how to catch E, since it's not a child at all.
const App = () => {
return <Form>
<InputA/>
<InputB>
<InputC/>
</InputB>
<InputD/>
</Form>
}
const InputD = ()=> {
return <InputE/>
}
I know that I could solve the problem in some other ways - e.g. have the Form provide a context to which the descendant inputs register - but since i have the children-based logic in place, it would be great if there is a way to extend it to all descendants. If there's good reasons to go another route, I'm of course happy to hear them.