解析虚拟dom

给出以下数据结构,解析出对应的dom数据

    //样例数据
    let demoNode = {
        tagName: 'ul',
        props: {
            class: 'list'
        },
        children: [
            {
                tagName: 'li',
                children: [
                    {
                        tagName: 'ol',
                        props: {
                            class: 'list2'
                        },
                        children: [
                            {
                                tagName: 'li',
                                children: ["ddddd"]
                            },
                            {
                                tagName: 'li',
                                children: ['toutiao']
                            },
                    ],
                },
            ],
        },
            {
                tagName: 'li',
                children: ['toutiao']
            },
    ],
    };
function render(demoNode) {
    const root = document.createElement(demoNode.tagName);
    const {
        props,
        children
    } = demoNode;
    // esLint-disable-next-line no-restricted-syntax
    for (let key in props) {
        // eslint-disable-next-line no-prototype-builtins
        if (props.hasOwnProperty(key)) {
            root.setAttribute(key, props[key]);
        }
    }
    if (children.length) {
        if (typeof children[0] === "string" && children.length === 1) {
            root.innerText = children[0];
        } else {
            for (child of children) {
                const mmm = render(child);
                root.appendChild(mmm);
            }
        }
    }

    return root;
}

var dd = render(demoNode);
console.log(dd);


本文标题:解析虚拟dom
本文链接:https://56way.com/p/135.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。