js 写一个有父id的递归展示

假设你有一个数据结构如下：

const data = [
  { id: 1, parent_id: null, name: 'Parent 1' },
  { id: 2, parent_id: 1, name: 'Child 1-1' },
  { id: 3, parent_id: 1, name: 'Child 1-2' },
  { id: 4, parent_id: 2, name: 'Grandchild 1-1-1' },
  { id: 5, parent_id: 3, name: 'Grandchild 1-2-1' },
  { id: 6, parent_id: null, name: 'Parent 2' },
  { id: 7, parent_id: 6, name: 'Child 2-1' },
  { id: 8, parent_id: 6, name: 'Child 2-2' },
  { id: 9, parent_id: 8, name: 'Grandchild 2-2-1' },
];

你可以使用递归函数来展示这个数据结构：

function renderTree(parentId, data) {
  const children = data.filter(item => item.parent_id === parentId);
  if (children.length === 0) {
    return '';
  }
  let result = '<ul>';
  for (let i = 0; i < children.length; i++) {
    result += `<li>${children[i].name}</li>`;
    result += renderTree(children[i].id, data);
  }
  result += '</ul>';
  return result;
}

// 展示 parentId 为 1 的树形结构
const html = renderTree(1, data);
document.getElementById('tree').innerHTML = html;

这个函数会递归遍历数据结构，找到所有 `parent_id` 为指定 `parentId` 的节点，并将它们的名称展示在一个 `<ul>` 标签里。如果一个节点没有子节点，那么递归就会停止。你可以将这个函数的结果插入到页面中的任何位置，例如：

<div id="tree"></div>