treeData 树结构数据处理(react)

1.什么是tree

==树(tree)==形结构是一种重要的非线性结构，依据分支关系定义的层次结构，在这种结构中，每个元素至多只有一个前趋，但可以有多个后继。

树的定义 ：树(Tree)是n(n 大于等于0)个节点的有限集合T，当n=0时称为空树，否则，称为非空树
2.树结构
a.树（Tree）：n(n>=0)个节点构成的有限集合。
b.空树：n = 0 时，就称为一个空树。
c.根（Root）：位于树顶部的节点，它没有父节点。
d.子树（SubTree）：子树由节点和它的后代构成。
e.父节点：有子树的节点是它的子树的根节点的父节点。
f.子节点：A是B的父节点，则B是A的子节点。
g.兄弟节点：具有同一个父节点的不同子节点互称为兄弟节点。
h.节点的度：节点的子树个数。
i.树的度：树的所有节点中最大的度数。
j.叶节点：度为0的结点。
k.节点的层次：根节点是第一层，其他的节点的层次是它的父节点的层次加1。
l.树的深度：数中所有节点的最大层次是这棵树的深度。
m.路径和路径长度：从节点A到节点H的路径是一个节点序列A，B，C...，H。路径所包含边的个数为路径的长度。
3.树的形状

4.tree结构在react中的普遍应用

在antd中常用的treedata结构组件：
a.Tree:

bash 复制代码

import React from 'react';
import { Tree } from 'antd';
const treeData = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
            disableCheckbox: true,
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [
          {
            title: (
              <span
                style={{
                  color: '#1677ff',
                }}
              >
                sss
              </span>
            ),
            key: '0-0-1-0',
          },
        ],
      },
    ],
  },
];
const App = () => {
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };
  const onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
  };
  return (
    <Tree
      checkable
      defaultExpandedKeys={['0-0-0', '0-0-1']}
      defaultSelectedKeys={['0-0-0', '0-0-1']}
      defaultCheckedKeys={['0-0-0', '0-0-1']}
      onSelect={onSelect}
      onCheck={onCheck}
      treeData={treeData}
    />
  );
};
export default App;

b.TreeSelect

bash 复制代码

import React, { useState } from 'react';
import { TreeSelect } from 'antd';
const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'leaf1',
            title: 'leaf1',
          },
          {
            value: 'leaf2',
            title: 'leaf2',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'leaf3',
            title: (
              <b
                style={{
                  color: '#08c',
                }}
              >
                leaf3
              </b>
            ),
          },
        ],
      },
    ],
  },
];
const App = () => {
  const [value, setValue] = useState();
  const onChange = (newValue) => {
    setValue(newValue);
  };
  return (
    <TreeSelect
      showSearch
      style={{
        width: '100%',
      }}
      value={value}
      dropdownStyle={{
        maxHeight: 400,
        overflow: 'auto',
      }}
      placeholder="Please select"
      allowClear
      treeDefaultExpandAll
      onChange={onChange}
      treeData={treeData}
    />
  );
};
export default App;

5.treeData动态处理

在一个常规项目中，当我们遇到需要进行处理的tree结构数据，后端返回给前端的数据往往存在多层性和不确定性。因此前端在处理以上数据需要配合递归进行处理

//示例数据

bash 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arrTest = [
        {
          cateName: "开发测试",
          parentId: 0,
          id: 97,
          fileCatalogueDTOS: [
            {
              cateName: "小明",
              id: 102,
              parentId: 97,
              fileCatalogueDTOS: [
                {
                  cateName: "家庭资料",
                  id: 100,
                  parentId: 102,
                  fileCatalogueDTOS: [
                    {
                      cateName: "123",
                      id: 101,
                      parentId: 100
                    },
                    {
                      cateName: "22223342",
                      id: 103,
                      parentId: 100
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          cateName: "测试aa",
          parentId: 0,
          id: 104,
          fileCatalogueDTOS: [
            {
              cateName: "小红",
              id: 102,
              parentId: 104
            }
          ]
        }
      ];
      //  treeData数据转换函数
      function convertToTree(data) {
        const tree = [];
        data.map(item => {
          tree.push({
            value: item.cateName,
            title: item.cateName,
            children: item.fileCatalogueDTOS
              ? convertToTree(item.fileCatalogueDTOS)
              : []
          });
        });
        return tree;
      }
      console.log(convertToTree(arrTest));
    </script>
  </body>
</html>

打印结果