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

发布时间：2020-12-15 09:34:26 所属栏目：百科来源：网络整理

导读：我有兴趣遍历React中的整个组件树. 假设我有一个组件： class Child extends Component { //... render() { return div spanNot reachable/span /div }}class Parent extends Component { //... traverse(children) { console.log(children); React.Children

我有兴趣遍历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方法.这是进一步深化的关键.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!