reactjs - 在React中，如何遍历整个渲染树，而不仅仅是 "children"

Question

我有兴趣遍历 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>
    }
}

我希望能够访问“无法访问”跨度，但是 React.Children.map 只遍历字面写的“子项”，而不是组件内部子项。

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

Answer 1

可以遍历树结构。您已经找到了 React.Children.map 方法，这已经做得很好了。这是深入研究的关键。

React.Children.map(this.props.children, child => {/* work with child */}) 使您可以访问 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>
    )
}

用更容易理解的东西替换每个子项，以创建此类包装器中包装的任何节点的树结构的可视化。