Is there a way to traverse the Virtual Dom ? I mostly just need a structure that will allow me to have / see child parent relationships aka :
FormTitleWrapper: { key: "FormTitleWrapper",
children: { FormTitle : { key:"FormTitle", parent: { key: "FormTitleWrapper", /* reference back to the parent */ } },
parent: { key ... }
}
I could make a structure like this by recursing over all of the children that I have wrapped with the component, but that did only work for Elements that are in the file :
// Form.jsx
return(
<BuildTree>
// will be visible
<FormTitleWrapper>
<FormTitle>Title 1</FormTitle>
</FormTitleWrapper>
// will not be visible
<Select>{AllOptions.map(...)}</Select>
// will not be visible
<TextInput></TextInput>
</BuildTree>
)
// TextInput.jsx
// none are visible to Form.jsx
return (<Parent><Child></Child></Parent>)
I was using the props.children of React's Elements, didn't see another way to get parent / child relationships.
Right now there are 2 possible solutions that I see, 1 where I wrap the children and then update the tree accordingly whenever react loads the childwrapper. The problem with that is that it would need to diff on every update of the component to make sure that the tree is up to date, and I don't want to re-do a task that is already done by react.
The second option is to load the vanilla dom and get the children / parent relationship that way. I am not sure whether this is performant or not, that's why I tried doing the first approach through react.
The third option is that I am missing something obvious :)