先看一下我们的数据结构
const data = [
{
id: 1,
parentId: 0,
name: "Node 1"
},
{
id: 2,
parentId: 1,
name: "Node 2"
},
{
id: 3,
parentId: 1,
name: "Node 3"
},
{
id: 4,
parentId: 2,
name: "Node 4"
},
{
id: 5,
parentId: 2,
name: "Node 5"
}
];
这是一个标准的数据,带有父id和子id的数据
然后先把我们父级id等于0的数据过滤出来,因为父级id等于0的,证明这条数据已经没有父级了,这就是我们最外层的数据
const rootNodes = data.filter(node => node.parentId === 0);
现在我们的rootNodes的数据是parentId为0的数据
// 递归函数,用于返回给定父节点的所有子节点
function getChildren(parentNode, nodes) {
return nodes.filter(node => node.parentId === parentNode.id)
.map(node => ({
...node,
children: getChildren(node, nodes)
}));
}
// 递归地生成树形结构
const tree = rootNodes.map(node => ({
...node,
// 这里的data是我们的全部数据
children: getChildren(node, data)
}));