js循环调用标签展示递归数据据

假设你有一个递归的数据结构，例如：

const data = [
  {
    id: 1,
    name: 'parent 1',
    children: [
      {
        id: 2,
        name: 'child 1',
        children: [
          {
            id: 3,
            name: 'grandchild 1',
            children: []
          },
          {
            id: 4,
            name: 'grandchild 2',
            children: []
          }
        ]
      },
      {
        id: 5,
        name: 'child 2',
        children: []
      }
    ]
  },
  {
    id: 6,
    name: 'parent 2',
    children: [
      {
        id: 7,
        name: 'child 3',
        children: []
      }
    ]
  }
];

你可以使用递归函数来遍历这个数据结构，并使用 `<ul>` 和 `<li>` 标记来展示它。例如：

function renderTree(data) {
  if (!Array.isArray(data) || data.length === 0) {
    return '';
  }

  const items = data.map(({ id, name, children }) => `
    <li>
      <span>${name}</span>
      ${renderTree(children)}
    </li>
  `);

  return `<ul>${items.join('')}</ul>`;
}

const tree = renderTree(data);
console.log(tree); // <ul>...</ul>

这个函数会递归遍历整个数据结构，并返回一个包含所有展示标记的字符串。你可以将这个字符串插入到页面中，以展示整个树形结构。