reactjs – 在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只遍历字面上写的“子”,而不是组件内部子项.

有没有办法访问遍历函数中的那些？

React.Children.map(this.props.children,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>
    )
}

用更易理解的东西替换每个孩子,以创建包裹在这种包装器中的任何节点的树结构的可视化.