React将数据转化成树形结构

1、React将数据转化成树形结构

// 初始数据
let result = [
  { parentId: null, id: 1, name: "书籍", count: 100 },
  { parentId: 1, id: 2, name: "西游记", count: 50 },
  { parentId: 1, id: 3, name: "红楼梦", count: 10 },
  { parentId: 1, id: 4, name: "水浒传", count: 20 },
  { parentId: 1, id: 5, name: "三国演义", count: 20 },
  { parentId: null, id: 6, name: "文具", count: 10 },
  { parentId: 6, id: 7, name: "铅笔", count: 5 },
  { parentId: 6, id: 8, name: "橡皮", count: 5 },
];

const getTreeData = (treeData, parentId) => {
  // 把数据转化为树型结构
  let tree = [];
  let currentParentId = parentId || null;
  for (let i = 0; i < treeData.length; i += 1) {
    if (treeData[i]) {
      if (treeData[i].parentId === currentParentId) {
        tree.push(treeData[i]);
      }
    }
  }
  for (let j = 0; j < tree.length; j += 1) {
    if (tree[j]) {
      let children = getTreeData(treeData, tree[j].id);
      if (children && children.length) {
        tree[j].children = children;
      }
    }
  }
  return tree;
};

// 树形数据
let data = getTreeData(result);
console.log(data);
/*[
    {
        parentId: null,
        id:1,
        name:'书籍',
        count:100,
        children:[
            {parentId:1,id:2,name:'西游记',count: 50},
            {parentId:1,id:3,name:'红楼梦',count: 10},
            {parentId:1,id:4,name:'水浒传',count: 20},
            {parentId:1,id:5,name:'三国演义',count: 20},
        ]
    },
    {
        parentId: null,
        id:6,
        name:'文具',
        count:10,
        children:[
            {parentId:6,id:7,name:'铅笔',count:5},
            {parentId:6,id:8,name:'橡皮',count:5},
        ]
    }
]*/

2、实例(react antd table树形数据)

线上地址：react antd table 树形结构数据

import React, { useState, useEffect } from 'react';
import { Table } from 'antd';

const Test = () => {
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);
  const [dataSource, setDataSource] = useState([]);
  const columns = [
    {
      title: '名称',
      key: 'name',
      dataIndex: 'name',
    },
    {
      title: '描述',
      key: 'desc',
      dataIndex: 'desc',
    },
  ];
  const onExpandTable = (expanded, record) => {
    let arr = expandedRowKeys;
    if (expanded) {
      arr.push(record.id);
    } else {
      arr.splice(
        arr.findIndex((i) => i === record.id),
        1
      );
    }
    setExpandedRowKeys(arr);
  };

  const getTreeData = (treeData, parentId) => {
    // 把数据转化为树型结构
    let tree = [];
    let currentParentId = parentId || null;
    for (let i = 0; i < treeData.length; i += 1) {
      if (treeData[i]) {
        if (treeData[i].parentId === currentParentId) {
          tree.push(treeData[i]);
        }
      }
    }
    for (let j = 0; j < tree.length; j += 1) {
      if (tree[j]) {
        let children = getTreeData(treeData, tree[j].id);
        if (children && children.length) {
          tree[j].children = children;
        }
      }
    }
    return tree;
  };

  useEffect(() => {
    const res = [
      {
        parentId: null,
        id: '0e02f058-65fc-4e47-82d5-3aaf95f816cd',
        name: '中国',
        desc: '中国陆地面积约9600000平方千米',
      },
      {
        parentId: '0e02f058-65fc-4e47-82d5-3aaf95f816cd',
        id: '03014a12-3948-4f8a-b182-ed8b6d58a7ea',
        name: '四川',
        desc: '四川地域面积约486000平方公里',
      },
      {
        parentId: '0e02f058-65fc-4e47-82d5-3aaf95f816cd',
        id: '201f9c09-f2e8-4bea-917e-b5fdc56d9e24',
        name: '山东',
        desc: '陆域面积约155800平方公里',
      },
      {
        parentId: '03014a12-3948-4f8a-b182-ed8b6d58a7ea',
        id: '305d7648-9e3e-4b25-a246-3be08344434e',
        name: '成都',
        desc: '成都地域面积约14335平方公里',
      },
      {
        parentId: '201f9c09-f2e8-4bea-917e-b5fdc56d9e24',
        id: '3898961f-7487-46d6-8595-f2dfac59b116',
        name: '济南',
        desc: '济南地域面积约10244.45平方公里',
      },
    ];
    let data = getTreeData(res);
    console.log('data: ', data);
    setDataSource(data);
  }, []);
  return (
    <>
      <Table
        columns={columns}
        dataSource={dataSource}
        rowKey={(record) => record.id}
        expandedRowKeys={expandedRowKeys}
        onExpand={onExpandTable}
        pagination={false}
      />
    </>
  );
};

export default Test;