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

用更易懂的语言替换每个孩子，以可视化方式显示用这种包装器包装的任何节点的树结构。

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

1 个答案: