使用递归渲染虚拟树

Question

给定一个类似于虚拟树的对象。您需要递归地遍历对象的所有分支并根据其内部层次结构渲染元素。

我写了一个函数，但它有错误。

我无法重置父变量。看来有必要使用递归来不同地实现该功能

const tree = {
    type: 'component',
    children: [
        {
            type: 'host',
            tag: 'div',
            children: 'div content',
        },
        {
            type: 'component',
            children: [
                {
                    type: 'host',
                    tag: 'div',
                    children: [
                        {
                            type: 'host',
                            tag: 'span',
                            children: 'span content'
                        },
                        {
                            type: 'host',
                            tag: 'span',
                            children: 'span content'
                        },
                    ]
                }
            ]
        },
        {
            type: 'host',
            tag: 'div',
            children: 'div content',
        }
    ]
}

let parent = null;

function renderTree(tree) {
    const treeBox = document.getElementById('tree');

    for (const key in tree) {
        const value = tree[key];

        if (key === 'children') {
        }

        if (Array.isArray(value)) {
            renderTree(value);
        }

        if (!Array.isArray(value) && typeof value === "object") {
            if (value.type !== "component") {
                let isNested = false;

                const element = document.createElement(value.tag);

                if (parent) {
                    parent.appendChild(element);
                } else {
                    treeBox.appendChild(element);
                }

                if (Array.isArray(value.children)) {
                    isNested = !isNested;
                    parent = element;
                }

                if (!Array.isArray(value.children)) {
                    element.textContent = value.children;
                }

                // if(isNested == false) {
                //   parent = null;          
                // }

            }

            renderTree(value)
        }
    }
}

renderTree(tree);

Answer 1

假设

component

不需要实体存在，但他们只需呈现他们的孩子即可：

const tree = {
  type: "component",
  children: [
    {
      type: "host",
      tag: "div",
      children: "div content",
    },
    {
      type: "component",
      children: [
        {
          type: "host",
          tag: "div",
          children: [
            {
              type: "host",
              tag: "span",
              children: "span content",
            },
            {
              type: "host",
              tag: "span",
              children: "span content",
            },
          ],
        },
      ],
    },
    {
      type: "host",
      tag: "div",
      children: "div content",
    },
  ],
};

function renderTreeNode(tn, element) {
  const { type, tag, children } = tn;
  if (type === "component") {
    for (const child of children) {
      renderTreeNode(child, element);
    }
  } else if (type === "host") {
    const el = document.createElement(tag);
    if (Array.isArray(children)) {
      for (const child of children) {
        renderTreeNode(child, el);
      }
    } else {
      el.textContent = children;
    }
    element.appendChild(el);
  } else {
    throw new Error("Unknown type");
  }
}

renderTreeNode(tree, document.body);

div {
  background: pink;
  padding: 1em;
  margin: 1em;
}

span {
  background: orange;
}