手写递归拼接树(renderDataTree)

很简单的题,模拟 DOM 树渲染

要求实现 renderDataTree() 函数

const data = [
  {
    tag: "div",
    name: "标题1",
    children: [
      {
        tag: "div",
        name: "标题2",
        children: [{ tag: "div", name: "标题3", children: [] }],
      },
      { tag: "div", name: "标题4", children: [] },
    ],
  },
];

renderDataTree(data);

返回:

<div>
  标题1
  <div>
    标题2
    <div>标题3</div>
  </div>
  <div>标题4</div>
</div>

参考实现

点击展开
function renderDataTree(nodes) {
  return nodes
    .map((node) => {
      const { tag, name, children = [] } = node;
      const inner = renderDataTree(children); // 递归渲染子节点
      return `<${tag}>${name}${inner}</${tag}>`;
    })
    .join("");
}

评论

加载中...