reactjs - React - 替换 props.children 中的子组件

Question

正如另一个question中所见，可以使用 React.Children.ma​​p 循环遍历子元素。我正在寻找一种方法来递归遍历子树(props.children.props.children...)并用另一种类型的元素替换某些元素。它会发生在高阶组件的渲染函数中。

非常感谢任何帮助和想法!

Answer 1

您可以构建一个递归包装器组件，替换它具有的任何子组件，并以相同的方式包装其子组件。替换将递归地继续，直到子元素不再有子元素。

这是此类组件的示例。它替代 <p>具有 <span> 的元素元素。

const RecursiveWrapper = props => {
    const wrappedChildren = React.Children.map(
        props.children,
        child => {
            const type = child.type === 'p' ? 'span' : child.type
            if (child.props && child.props.children) {
                return React.cloneElement(
                    {
                        ...child,
                        type // substitute original type
                    },
                    {
                        ...child.props,
                        // Wrap grandchildren too
                        children: (
                            <RecursiveWrapper>
                                {child.props.children}
                            </RecursiveWrapper>
                        )
                    }
                )
            }
            return child
        }
    )
    return (
        <React.Fragment>
            {wrappedChildren}
        </React.Fragment>
    )
}

您也可以使用相同的总体思路来注入(inject)其他 Prop 。