在React中，我如何遍历整个渲染树，而不仅仅是“孩子”

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.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>
    )
}

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