如何修复递归HTML元素追加函数中子元素未正确挂载的问题

核心错误点 #

你的代码中子元素无法渲染的关键原因是：在根节点的循环里，传递给renderChildren的参数写错了——你用了e.element.children，但数组里的每个对象e的children属性是直接挂载在e本身的，e.element只是字符串（比如'div'），根本不存在children属性。

修复步骤 #

1. 修正根节点的返回语句 #

把e.element.children改为e.children：

return (
    array.map((e, i) => {
        return (
            <e.element key={i}>
                {renderChildren(e.children)}
            </e.element>
        );
    })
);

2. 简化renderChildren函数 #

原函数的条件判断可以省略，不管子元素有没有children，直接递归调用即可——当没有子元素时，函数返回null，React会自动忽略这部分内容：

const renderChildren = (children) => {
    if (!children || children.length === 0) {
        return null;
    };

    return children.map((child, index) => (
        <child.element key={index}>
            {renderChildren(child.children)}
        </child.element>
    ));
};

完整可运行代码 #

export const array = [
    {
        element: 'div',
        children: [
            {
                element: 'div',
                children: [
                    { element: 'div' },
                    { element: 'div' },
                    { element: 'div' }
                ]
            },
            {
                element: 'div',
                children: [
                    {
                        element: 'div',
                        children: [
                            { element: 'div' },
                            { element: 'div' }
                        ]
                    }
                ]
            }
        ]
    },
    { element: 'div' }
];

const renderChildren = (children) => {
    if (!children || children.length === 0) {
        return null;
    };

    return children.map((child, index) => (
        <child.element key={index}>
            {renderChildren(child.children)}
        </child.element>
    ));
};

// 根渲染函数
const renderElements = () => {
    return (
        array.map((e, i) => (
            <e.element key={i}>
                {renderChildren(e.children)}
            </e.element>
        ))
    );
};

额外提示 #

• React中使用动态标签时，child.element如果是HTML标签（如div）必须是小写字符串，若是自定义组件则需要大写开头，你的代码符合要求。
• 尽量不要用数组索引作为key，如果数据有唯一标识（如id），建议用唯一标识代替索引，避免列表更新时出现不必要的重渲染问题。

内容的提问来源于stack exchange，提问作者user22362540