javascript - 如何改变深层嵌套的 child ？

Question

在下面的代码中，我想要所有 <p>具有“data-mini-slug”属性的标签将作为 <input> 返回标签代替。

当返回一个 <p> 时，以下代码有效dom元素。

您将如何转换所有嵌套的 <p data-mini-slug="hello">元素作为输入，同时保持 dom 结构？ React 有内置的解决方案吗？

function hoc(WrappedComponent) {
    return class Enhancer extends WrappedComponent {
        render() {
            const elementsTree = super.render();
            let newProps = {};
            if (elementsTree) {
                const miniSlug = elementsTree.props['data-mini-slug']
                if (elementsTree.type === "p" && miniSlug) {
                    newProps = { value: `New props is ${miniSlug}` }
                    const props = Object.assign({}, elementsTree.props, newProps)
                    return <input {...props} />
                }

            }
            return elementsTree
        }
    }
}

class Example extends React.Component {
    render() {
        // return <p data-mini-slug="deepChild" data-new-value="Deep nested child" />
        return (
            <div>
                <h1>Hoc dom element conversion</h1>
                <p data-mini-slug="child" data-new-value="Surface child" />
                <div>
                    <div>
                        <p data-mini-slug="deepChild" data-new-value="Deep nested child" />
                    </div>
                </div>
            </div>
        )
    }
}

export default hoc(Example)

Answer 1

您可以通过在克隆元素中调用自身的函数来创建循环。

import React from 'react'

function iterateOverChildren(children) {
    return React.Children.map(children, child => {
        if (!React.isValidElement(child)) {
            return child;
        }

        if (child.props.children) {
            child = React.cloneElement(child, {
                children: iterateOverChildren(child.props.children)
            });
        }

        return alterChild(child);
    });

}

function alterChild(child) {

    let newProps = {};
    const miniSlug = child.props['data-mini-slug']
    if (child.type === "p" && miniSlug) {
        newProps = { value: `New props is ${miniSlug}` }
        const props = Object.assign({}, child.props, newProps)
        child =  <input {...props} />
    }

    return child
}

function hoc(WrappedComponent) {
    return class Enhancer extends WrappedComponent {
        render() {
            const elementsTree = super.render();
            return iterateOverChildren(elementsTree.props.children)
        }
    }
}

class Example extends React.Component {
    render() {
        // return <p data-mini-slug="deepChild" data-new-value="Deep nested child" />
        return (
            <div>
                <h1>Hoc dom element conversion</h1>
                <p data-mini-slug="child" data-new-value="Surface child" />
                <div>
                    <div>
                        <p data-mini-slug="deepChild" data-new-value="Deep nested child" />
                    </div>
                </div>
            </div>
        )
    }
}

export default hoc(Example)