Reactjs 在React中，如何遍历整个渲染树，而不仅仅是；“儿童”；

我感兴趣的是遍历React中的整个组件树

假设我有一个组件：

class Child extends Component {
    //...
    render() {
        return <div>
            <span>Not reachable</span>
        </div>
    }
}

class Parent extends Component {
    //...
    traverse(children) {
        console.log(children);
        React.Children.map(this.traverse);
    }
    render() {
        this.traverse(this.props.children);
        return <div>{this.props.children}</div>
    }
}

class Container extends Component {
    //...
    render() {
        return <Parent>
            <Child />
        </Parent>
    }
}

类子级扩展组件{
//...
render（）{
返回
无法到达
}
}
类父级扩展组件{
//...
导线测量（儿童）{
console.log（儿童）；
React.Children.map（this.transverse）；
}
render（）{
this.traverse（this.props.children）；
返回{this.props.children}
}
}
类容器扩展组件{
//...
render（）{
返回
}
}

我希望能够访问“不可访问”范围，但

React.Children.map

只遍历字面上写的“Children”，而不是组件内部的子级

---

有什么方法可以访问遍历函数中的那些吗？

可以遍历树结构。您已经很好地找到了

React.Children.map

方法。这是深入研究的关键

React.Children.map（this.props.Children，child=>{/*使用child*/}）

允许您访问

child

对象。如果孩子有孩子，他们可以作为

child.props.children

访问

您可以使用递归组件递归地遍历树结构。下面是一个示例组件，它仅呈现每个节点的子节点数量

const RecursiveWrapper = props => {
    const wrappedChildren = React.Children.map(
        props.children,
        child => {
            if (child.props && child.props.children) {
                return (
                    <RecursiveWrapper>
                        {child.props.children}
                    </RecursiveWrapper>
                )
            }
            return (
                <div>
                    {'children: 0'}
                </div>
            )
        }
    )
    return (
        <React.Fragment>
            {`children: ${wrappedChildren.length}`}
            <div>
                {wrappedChildren}
            </div>
        </React.Fragment>
    )
}

const RecursiveWrapper=props=>{
const wrappedChildren=React.Children.map(
道具，儿童，
孩子=>{
if（child.props&&child.props.children）{
返回(
{child.props.children}
)
}
返回(
{'children:0'}
)
}
)
返回(
{`children:${wrappedChildren.length}`}
{wrappedChildren}
)
}

---

用更容易理解的内容替换每个子节点，以创建这种包装中包装的任何节点的树结构的可视化。

这里的用例是什么？似乎需要遍历的层次结构将存在于某个状态中的某个位置，而不是由于这种状态而创建的React元素中。我同意azium的观点，告诉我们您的用例，我们可能会帮助您找到替代解决方案。通常，您不希望这样遍历子对象。这在像jQuery这样的库中非常常见，但对于React来说基本上是不必要的。我正在尝试创建树的可视化。我肯定需要能够以这种方式遍历整棵树。请告诉我更多关于你的案例，甚至可能包括一个你试图实现的具体例子。Fwiw，你不能这么做，但是如果你给我们更多的细节，我们可以想出一种更具反应性的方式。这是一个好问题，“向我展示你的用例”的评论有点愚蠢。我希望有人能回答这个问题。我可能会想出一个快速遍历的方法，实际上有点震惊，这在任何地方都不存在。