Javascript 在React中遍历虚拟DOM

有没有办法遍历虚拟Dom？我主要只需要一个结构，使我能够拥有/看到孩子与父母的关系：

FormTitleRapper:{key:“FormTitleRapper”，
子项：{FormTitle:{key:“FormTitle”，父项：{key:“FormTitleRapper”，/*引用回父项*/}，
父项：{key…}
}

我可以通过递归使用组件包装的所有子级来创建这样的结构，但这只适用于文件中的元素：

// 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>)

//Form.jsx
返回(
//将可见
标题1
//将不可见
{AllOptions.map（…）}
//将不可见
)
//TextInput.jsx
//Form.jsx看不到任何文件
返回（）

我当时使用的是React元素的

道具。children

，没有找到另一种获得父子关系的方法

现在我看到了两种可能的解决方案，一种是在react加载childwrapper时包装子项，然后相应地更新树。问题是，每次更新组件时都需要区分，以确保树是最新的，我不想重新执行react已经完成的任务

第二种选择是加载vanilla dom并以这种方式获取子/父关系。我不确定这是否有效，这就是为什么我尝试通过react执行第一种方法

第三种选择是我遗漏了一些明显的东西：）