antd中复杂度最高的组件Tree

Tree树形控件，多层次的结构列表。一般作为展示树形数据的控件，或者作为树形数据添加和修改的业务组件。

一、基础Tree

• 注意数据和展示的略微区别；如果初始化checkedKeys数组中有父节点但是没有子节点，展示的时候会有选中子节点的效果，如果没有通过onCheck去setCheckedKeys，那么checkedKeys不变只有父节点；如果重新setCheckedKeys，该父节点的子节点key也会被收纳入checkedKeys数组；
• 同样的，expandedKeys也是如此，初始值设置子节点展开（expandedKeys中含有子节点但是没有父节点）父节点同样会有展开的画面效果；当通过onExpand去设置新的expandedKeys，会把所有直系祖上节点key纳入expandedKeys

import { Button, Tree } from "antd";
import { useState } from "react";
const treeData = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        // disabled: true, // checkbox和树节点都不可点击
        children: [
          {
            title: "leaf",
            key: "0-0-0-0",
            // disableCheckbox: true, // 只是checkbox不可点击
          },
          {
            title: "leaf",
            key: "0-0-0-1",
            children: [
              {
                title: "leaf",
                key: "0-0-0-1-0",
              },
              {
                title: "leaf",
                key: "0-0-0-1-1",
              },
            ],
          },
        ],
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
        children: [
          {
            // 自定义节点文案，优先级高于titleRender
            title: (
              <span
                style={{
                  color: "red",
                }}
              >
                sss
              </span>
            ),
            key: "0-0-1-0",
          },
        ],
      },
    ],
  },
  {
    title: "parent 2",
    key: "0-1",
    children: [
      {
        title: "parent 2-0",
        key: "0-1-0",
      },
    ],
  },
];
const TreePage = () => {
  // 默认展开的父节点；注意该节点的子节点都会暴漏出来，并且往上展开，也就是说他的祖上直系节点会一层层展开
  // 父-爷-祖父，直系展开；叔叔不会展开
  const [expandedKeys, setExpandedKeys] = useState(["0-0-0-0"]);
  const [checkedKeys, setCheckedKeys] = useState(["0-0-0"]);
  const [selectedKeys, setSelectedKeys] = useState(["0-0-1"]);
  // 是否自动展开父节点；如果子节点已经展开(子节点还有子节点)，这个时候关闭父节点，父节点不会折叠
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const onCheck = (checkedKeys, info) => {
    // checkedKeys是一个数组（全选状态的节点key），里面是选中的所有节点的key值集合
    // info: 包含checked（本次点击后是否选中），halfChecked（有哪些是半选）
    // info: node（当前节点信息完整信息，），event（事件类型）
    console.log("onCheck", checkedKeys, info);
    setCheckedKeys(checkedKeys);
  };
  const onSelect = (selectedKeys, info) => {
    // selectedKeys是一个数组（本次选中的节点key），里面是选中的节点的key值集合
    // info: 包含selected（本次点击后是否选中），event（事件类型）
    console.log("selected", selectedKeys, info);
    setSelectedKeys(selectedKeys);
  };

  const onExpand = (expandedKeysValue) => {
    console.log("onExpand", expandedKeysValue);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };
  //   const onCheck = (checkedKeysValue) => {
  //     console.log('onCheck', checkedKeysValue);
  //     setCheckedKeys(checkedKeysValue);
  //   };
  //   const onSelect = (selectedKeysValue, info) => {
  //     console.log('onSelect', info);
  //     setSelectedKeys(selectedKeysValue);
  //   };
  return (
    <div>
      <Tree
        checkable
        showLine={true}
        treeData={treeData}
        autoExpandParent={autoExpandParent}
        expandedKeys={expandedKeys}
        checkedKeys={checkedKeys}
        selectedKeys={selectedKeys}
        // 默认展开哪一个节点，也就是说他的子节点那一级会暴漏出来(如果有子节点)
        defaultExpandedKeys={["0-0"]}
        // 最复杂的是checkedKeys，因为父节点会导致子节点也被选中，所以需要设置defaultExpandedKeys来展开父节点
        defaultCheckedKeys={["0-0-0"]}
        // 默认选中的树节点，树节点的文案（title）会被选中
        // defaultSelectedKeys={["0-0-1"]}
        onCheck={onCheck}
        onSelect={onSelect}
        onExpand={onExpand}
        titleRender={(node) => (
          <span
            style={{
              color: "#666",
            }}
          >
            {node.title}
          </span>
        )}
        // 设置true后，父节点不会遗传选中效果，一般不常用；这个tree组件的特点就是快速批量选中
        // checkStrictly={true}
      />
      <Button
        style={{ margin: "10px" }}
        onClick={() => {
          console.log(
            "Button clicked",
            checkedKeys,
            selectedKeys,
            expandedKeys,
          );
        }}
      >
        Button
      </Button>
    </div>
  );
};
export default TreePage;

二、图标和样式自定义

• title自定义：1、在treeData节点数据里设置；2、titleRender统一设置title，titleRender可以拿到节点原始数据；
• Tree组件上的icon表示默认的小图标（父节点+叶子节点）title前；showIcon表示icon开关，默认为关闭；treeData原始数据中的icon优先级更高
• showLine表示展示链接线；showLine.showLeafIcon = true，叶子节点前的链接线会变成小图标（一个默认的图标）；showLine.showLeafIcon = icon，可以指定自定义的小图标

import { Button, Tree, Switch, Input } from "antd";
import React, { useState } from "react";
import {
  FrownOutlined,
  FrownFilled,
  SmileOutlined,
  SmileFilled,
  FullscreenOutlined,
  SwapOutlined,
  VerticalAlignBottomOutlined,
  CarryOutOutlined,
} from "@ant-design/icons";
const treeDataDefault = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        // disabled: true, // checkbox和树节点都不可点击
        children: [
          {
            title: "leaf",
            key: "0-0-0-0",
            // disableCheckbox: true, // 只是checkbox不可点击
          },
          {
            title: "leaf",
            key: "0-0-0-1",
            children: [
              {
                title: "leaf",
                key: "0-0-0-1-0",
              },
              {
                title: "leaf",
                key: "0-0-0-1-1",
              },
            ],
          },
        ],
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
        children: [
          {
            // 自定义节点文案，优先级高于titleRender
            title: (
              <span
                style={{
                  color: "red",
                }}
              >
                sss
              </span>
            ),
            key: "0-0-1-0",
          },
        ],
      },
    ],
  },
  {
    title: "parent 2",
    key: "0-1",
    icon: <SmileOutlined />,
    children: [
      {
        title: "parent 2-0",
        key: "0-1-0",
        icon: ({ checked }) => (checked ? <FrownFilled /> : <FrownOutlined />),
      },
      {
        title: "parent 2-1",
        key: "0-1-1",
        icon: ({ selected }) =>
          selected ? <FrownFilled /> : <FrownOutlined />,
      },
      {
        // 自定义节点文案，优先级高于 titleRender
        title: (
          <div>
            <span style={{ color: "green", marginRight: "10px" }}>
              parent 2-2
            </span>
            <VerticalAlignBottomOutlined />
          </div>
        ),
        key: "0-1-2",
      },
    ],
  },
];
const TreePage = () => {
  // 默认展开的父节点；注意该节点的子节点都会暴漏出来，并且往上展开，
  // 也就是说他的祖上直系节点会一层层展开
  // 父-爷-祖父，直系展开；叔叔不会展开
  const [expandedKeys, setExpandedKeys] = useState(["0-0-0-0"]);
  const [checkedKeys, setCheckedKeys] = useState(["0-0-0"]);
  const [selectedKeys, setSelectedKeys] = useState(["0-0-1"]);
  // 是否自动展开父节点；如果子节点已经展开(子节点还有子节点)，这个时候关闭父节点，父节点不会折叠
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const [treeData, setTreeData] = useState(treeDataDefaultSimple);

  const onCheck = (checkedKeys, info) => {
    // checkedKeys是一个数组（全选状态的节点key），里面是选中的所有节点的key值集合
    // info: 包含checked（本次点击后是否选中），halfChecked（有哪些是半选）
    // info: node（当前节点信息完整信息，），event（事件类型）
    console.log("onCheck", checkedKeys, info);
    setCheckedKeys(checkedKeys);
  };
  const onSelect = (selectedKeys, info) => {
    // selectedKeys是一个数组（本次选中的节点key），里面是选中的节点的key值集合
    // info: 包含selected（本次点击后是否选中），event（事件类型）
    console.log("selected", selectedKeys, info);
    setSelectedKeys(selectedKeys);
  };

  const onExpand = (expandedKeysValue) => {
    console.log("onExpand", expandedKeysValue);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };


  return (
    <div>
      <Tree
        icon={<CarryOutOutlined />} // 自定义根节点图标; 对所有类型节点（父节点+叶子节点）生效
        showIcon={true} // 是否显示图标; 要开启，不然在treeData节点上设置icon属性无效；
        switcherIcon={<SwapOutlined />} // 自定义switcher图标
        checkable
        // showLine={{ showLeafIcon: false }} === showLine={false} 
        // showLeafIcon只针对叶子节点，不影响父节点
        // 默认是线，如果showLeafIcon = true, 
        // 那么叶子节点会显示一个小图标（在treeData节点上设置icon）
        // showLeafIcon = icon图标，那么在叶子节点上显示icon图标，覆盖在treeData节点上设置icon
        showLine={{ showLeafIcon: false }}
        treeData={treeData}
        autoExpandParent={autoExpandParent}
        expandedKeys={expandedKeys}
        checkedKeys={checkedKeys}
        selectedKeys={selectedKeys}
        // 默认展开哪一个节点，也就是说他的子节点那一级会暴漏出来(如果有子节点)
        defaultExpandedKeys={["0-0"]}
        // 最复杂的是checkedKeys，因为父节点会导致子节点也被选中，
        // 所以需要设置defaultExpandedKeys来展开父节点
        defaultCheckedKeys={["0-0-0"]}
        // 默认选中的树节点，树节点的文案（title）会被选中
        // defaultSelectedKeys={["0-0-1"]}
        onCheck={onCheck}
        onSelect={onSelect}
        onExpand={onExpand}
        // 自定义节点文案，优先级高于title; 统一的title样式编辑; 
        // node 就是 treeData 里面的节点数据
        // title就是节点数据里面的title，可以是字符串，可以是jsx
        titleRender={(node) => {
          return (
            <span
              style={{
                color: "#666",
              }}
            >
              {node.title}
            </span>
          );
        }}
        // 设置true后，父节点不会遗传选中效果，一般不常用；这个tree组件的特点就是快速批量选中
        // checkStrictly={true}
      />
      <Button
        style={{ margin: "10px" }}
        onClick={() => {
          console.log(
            "Button clicked",
            checkedKeys,
            selectedKeys,
            expandedKeys,
          );
        }}
      >
        Button
      </Button>
    </div>
  );
};
export default TreePage;

三、数据筛选

• 在完整数据的基础上，筛选出符合条件的节点，不满足条件的节点会消失
• 筛选出新的节点以后，获取展开的expandedKeys，将满足条件的节点都展开出来；当然也可以都不展开，那样相当于初始化，只不过树形数据变少了

import { Button, Tree, Switch, Input } from "antd";
import React, { useState } from "react";
import {
  FrownOutlined,
  FrownFilled,
  SmileOutlined,
  SmileFilled,
  FullscreenOutlined,
  SwapOutlined,
  VerticalAlignBottomOutlined,
  CarryOutOutlined,
} from "@ant-design/icons";
const treeDataDefaultSimple = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        children: [
          {
            title: "leaf",
            key: "0-0-0-0",
          },
          {
            title: "leaf",
            key: "0-0-0-1",
          },
        ],
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
        children: [
          {
            title: "leaf",
            key: "0-0-1-0",
          },
          {
            title: "leaf",
            key: "0-0-1-1",
          },
        ],
      },
    ],
  },
  {
    title: "parent 2",
    key: "0-1",
    children: [
      {
        title: "parent 2-0",
        key: "0-1-0",
      },
      {
        title: "parent 2-1",
        key: "0-1-1",
      },
      {
        title: "parent 2-2",
        key: "0-1-2",
      },
    ],
  },
];
const TreePage = () => {
  // 默认展开的父节点；注意该节点的子节点都会暴漏出来，并且往上展开，
  // 也就是说他的祖上直系节点会一层层展开
  // 父-爷-祖父，直系展开；叔叔不会展开
  const [expandedKeys, setExpandedKeys] = useState(["0-0-0-0"]);
  const [checkedKeys, setCheckedKeys] = useState(["0-0-0"]);
  const [selectedKeys, setSelectedKeys] = useState(["0-0-1"]);
  // 是否自动展开父节点；如果子节点已经展开(子节点还有子节点)，这个时候关闭父节点，父节点不会折叠
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const [searchValue, setSearchValue] = useState("");
  const [treeData, setTreeData] = useState(treeDataDefaultSimple);
  console.log(
    "treeDataDefault",
    JSON.parse(JSON.stringify(treeDataDefaultSimple)),
  );

  const onCheck = (checkedKeys, info) => {
    // checkedKeys是一个数组（全选状态的节点key），里面是选中的所有节点的key值集合
    // info: 包含checked（本次点击后是否选中），halfChecked（有哪些是半选）
    // info: node（当前节点信息完整信息，），event（事件类型）
    console.log("onCheck", checkedKeys, info);
    setCheckedKeys(checkedKeys);
  };
  const onSelect = (selectedKeys, info) => {
    // selectedKeys是一个数组（本次选中的节点key），里面是选中的节点的key值集合
    // info: 包含selected（本次点击后是否选中），event（事件类型）
    console.log("selected", selectedKeys, info);
    setSelectedKeys(selectedKeys);
  };

  const onExpand = (expandedKeysValue) => {
    console.log("onExpand", expandedKeysValue);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };
  // 通过子节点key获取父节点key
  const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some((item) => item.key === key)) {
          parentKey = node.key;
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };

  // 搜索节点功能；如果是复杂需求有点难度；先用简单例子实现；
  const onSearch = (value) => {
    console.log("onSearch", value);
    setSearchValue(value);
    const parentKey = [];
    // 过滤树节点
    const filterTreeData = (data) => {
      return data.filter((item) => {
        // 这里假设搜索key，可以根据需求自定义
        // 这里假设需要搜索父节点；有点需求可能要求只搜索末端节点，可以末端节点字段匹配
        if (item.key.indexOf(value) !== -1) {
          parentKey.push(getParentKey(item.key, treeDataDefaultSimple));
          return true;
        }
        if (item.children) {
          // 前序遍历；既要返回新的满足条件的子节点，挂载到父节点上，修改原数组
          // 还要告知上一轮递归循环是否有子节点满足条件，最终是由子节点决定是否保留父节点
          item.children = filterTreeData(item.children);
          return item.children.length !== 0;
        }
        return false;
      });
    };
    // filterTreeData修改了原数组吗，如果只是筛选，需要保证原数组不变，传入克隆数据
    const newTreeData = filterTreeData(
      JSON.parse(JSON.stringify(treeDataDefaultSimple)),
    );
    // 筛选后的新数据
    setTreeData(newTreeData);
    // 筛选后的新展开节点；注意是惰性展开，如果满足条件，不会再往子节点搜寻
    const newExpandedKeys = parentKey.filter(
      // 去掉undefined和重复的key
      (key, index, self) => key && self.indexOf(key) === index,
    );
    setExpandedKeys(newExpandedKeys);
    console.log("parentKey", newExpandedKeys);
    // 注意筛选数据以后，可以清除checkedKeys和selectedKeys；
    // 这个例子没有清除，只是展开了节点
  };
  return (
    <div>
      <Input
        style={{ margin: "10px" }}
        placeholder="input search text"
        onChange={(e) => onSearch(e.target.value)}
      />
      <Tree
        icon={<CarryOutOutlined />} // 自定义根节点图标; 对所有类型节点（父节点+叶子节点）生效
        // 是否显示图标; 要开启，不然在treeData节点（父节点+叶子节点）上设置icon属性无效；
        showIcon={true}
        switcherIcon={<SwapOutlined />} // 自定义switcher图标
        checkable
        // showLine={{ showLeafIcon: false }} === showLine={false}
        // showLeafIcon只针对叶子节点，不影响父节点
        // 默认是线，如果showLeafIcon = true, 那么叶子节点会显示一个小图标
        // showLeafIcon = icon图标，那么在叶子节点上显示icon图标，覆盖在treeData节点上设置icon
        showLine={{ showLeafIcon: false }}
        treeData={treeData}
        autoExpandParent={autoExpandParent}
        expandedKeys={expandedKeys}
        checkedKeys={checkedKeys}
        selectedKeys={selectedKeys}
        // 默认展开哪一个节点，也就是说他的子节点那一级会暴漏出来(如果有子节点)
        defaultExpandedKeys={["0-0"]}
        // 最复杂的是checkedKeys，因为父节点会导致子节点也被选中，
        //所以需要设置defaultExpandedKeys来展开父节点
        defaultCheckedKeys={["0-0-0"]}
        // 默认选中的树节点，树节点的文案（title）会被选中
        // defaultSelectedKeys={["0-0-1"]}
        onCheck={onCheck}
        onSelect={onSelect}
        onExpand={onExpand}
        // 自定义节点文案，优先级高于title; 统一的title样式编辑; node 就是 treeData 里面的节点数据
        // title就是节点数据里面的title，可以是字符串，可以是jsx
        titleRender={(node) => {
          return (
            <span
              style={{
                color: "#666",
              }}
            >
              {node.title}
            </span>
          );
        }}
        // 设置true后，父节点不会遗传选中效果，一般不常用；这个tree组件的特点就是快速批量选中
        // checkStrictly={true}
      />
      <Button
        style={{ margin: "10px" }}
        onClick={() => {
          console.log(
            "Button clicked",
            checkedKeys,
            selectedKeys,
            expandedKeys,
          );
        }}
      >
        Button
      </Button>
    </div>
  );
};
export default TreePage;

四、树形数据遍历

• 遍历整个树形数据，找出合适的节点并且修改（只是属性修改，不破坏树形结构）；默认展开搜索到的节点
• 有很多树形数据搜索都在接口端就可以完成，如果需要前端完成，需要在原数据基础上进行操作得到新的数据（不修改原数据）

import { Button, Tree, Switch, Input } from "antd";
import React, { useState, useMemo } from "react";
import {
  FrownOutlined,
  FrownFilled,
  SmileOutlined,
  SmileFilled,
  FullscreenOutlined,
  SwapOutlined,
  VerticalAlignBottomOutlined,
  CarryOutOutlined,
} from "@ant-design/icons";
const treeDataDefaultSimple = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        children: [
          {
            title: "leaf",
            key: "0-0-0-0",
          },
          {
            title: "leaf",
            key: "0-0-0-1",
          },
        ],
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
        children: [
          {
            title: "leaf",
            key: "0-0-1-0",
          },
          {
            title: "leaf",
            key: "0-0-1-1",
          },
        ],
      },
    ],
  },
  {
    title: "parent 2",
    key: "0-1",
    children: [
      {
        title: "parent 2-0",
        key: "0-1-0",
      },
      {
        title: "parent 2-1",
        key: "0-1-1",
      },
      {
        title: "parent 2-2",
        key: "0-1-2",
      },
    ],
  },
];
const TreePage = () => {
  // 默认展开的父节点；注意该节点的子节点都会暴漏出来，并且往上展开，
  // 也就是说他的祖上直系节点会一层层展开
  // 父-爷-祖父，直系展开；叔叔不会展开
  const [expandedKeys, setExpandedKeys] = useState(["0-0-0-0"]);
  const [checkedKeys, setCheckedKeys] = useState(["0-0-0"]);
  const [selectedKeys, setSelectedKeys] = useState(["0-0-1"]);
  // 是否自动展开父节点；如果子节点已经展开(子节点还有子节点)，这个时候关闭父节点，父节点不会折叠
  const [autoExpandParent, setAutoExpandParent] = useState(true);

  const [searchValue, setSearchValue] = useState("");
  const [treeData, setTreeData] = useState(treeDataDefaultSimple);
  console.log(
    "treeDataDefault",
    JSON.parse(JSON.stringify(treeDataDefaultSimple)),
  );

  const onCheck = (checkedKeys, info) => {
    // checkedKeys是一个数组（全选状态的节点key），里面是选中的所有节点的key值集合
    // info: 包含checked（本次点击后是否选中），halfChecked（有哪些是半选）
    // info: node（当前节点信息完整信息，），event（事件类型）
    console.log("onCheck", checkedKeys, info);
    setCheckedKeys(checkedKeys);
  };
  const onSelect = (selectedKeys, info) => {
    // selectedKeys是一个数组（本次选中的节点key），里面是选中的节点的key值集合
    // info: 包含selected（本次点击后是否选中），event（事件类型）
    console.log("selected", selectedKeys, info);
    setSelectedKeys(selectedKeys);
  };

  const onExpand = (expandedKeysValue) => {
    console.log("onExpand", expandedKeysValue);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  // 拍平树形数据，这样查询效率更高；假设我们需要对所有节点都可以搜索
  // 如果只需要搜索叶子，可以只存储叶子节点的key值
  const dataList = []; // 一维数组
  const generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      const { key, title } = node;
      dataList.push({
        key,
        title: title,
      });
      if (node.children) {
        generateList(node.children);
      }
    }
  };
  generateList(treeDataDefaultSimple);

  // 通过子节点key获取父节点key
  const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some((item) => item.key === key)) {
          parentKey = node.key;
        } else if (getParentKey(key, node.children)) {
          parentKey = getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };

  // 这里相当于把树形结构都循环了一遍; 过程中选择性进行样式的修改
  // 先序遍历，深度优先；最终查找所有节点
  const loop = (data) => {
    return data.map((item) => {
      const { key, title, children } = item;
      const newTitle =
        searchValue && key.indexOf(searchValue) > -1 ? (
          <span style={{ color: "red" }}>{title}</span>
        ) : (
          title
        );
      if (children) {
        return {
          ...item,
          title: newTitle,
          children: loop(children),
        };
      }
      return {
        ...item,
        title: newTitle,
      };
    });
  };

  // 搜索节点功能；如果是复杂需求有点难度；先用简单例子实现；
  const onSearch = (value) => {
    setSearchValue(value);
    const newExpandedKeys = dataList
      .map((item) => {
        if (item.key.indexOf(value) > -1) {
          return getParentKey(item.key, treeDataDefaultSimple);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);
    setExpandedKeys(newExpandedKeys);
    console.log("parentKey", newExpandedKeys);
    // 注意筛选数据以后，可以清除checkedKeys和selectedKeys；
    // 这个例子没有清除，只是展开了节点
  };

  const treeDataFilter = useMemo(
    () => loop(treeDataDefaultSimple),
    [searchValue],
  );

  console.log("treeDataFilter", treeDataFilter);
  return (
    <div>
      <Input
        style={{ margin: "10px" }}
        placeholder="input search text"
        onChange={(e) => onSearch(e.target.value)}
      />
      <Tree
        // icon={<CarryOutOutlined />} // 自定义根节点图标; 对所有类型节点（父节点+叶子节点）生效
        // 是否显示图标; 要开启，不然在treeData节点（父节点+叶子节点）上设置icon属性无效；
        // showIcon={true}
        switcherIcon={<SwapOutlined />} // 自定义switcher图标
        checkable
        // showLine={{ showLeafIcon: false }} === showLine={false}
        // showLeafIcon只针对叶子节点，不影响父节点
        // 默认是线，如果showLeafIcon = true, 那么叶子节点会显示一个小图标
        // showLeafIcon = icon图标，那么在叶子节点上显示icon图标，覆盖在treeData节点上设置icon
        showLine={{ showLeafIcon: false }}
        treeData={treeDataFilter}
        autoExpandParent={autoExpandParent}
        expandedKeys={expandedKeys}
        checkedKeys={checkedKeys}
        selectedKeys={selectedKeys}
        // 默认展开哪一个节点，也就是说他的子节点那一级会暴漏出来(如果有子节点)
        defaultExpandedKeys={["0-0"]}
        // 最复杂的是checkedKeys，因为父节点会导致子节点也被选中，
        //所以需要设置defaultExpandedKeys来展开父节点
        defaultCheckedKeys={["0-0-0"]}
        // 默认选中的树节点，树节点的文案（title）会被选中
        // defaultSelectedKeys={["0-0-1"]}
        onCheck={onCheck}
        onSelect={onSelect}
        onExpand={onExpand}
        // 自定义节点文案，优先级高于title; 统一的title样式编辑; node 就是 treeData 里面的节点数据
        // title就是节点数据里面的title，可以是字符串，可以是jsx
        titleRender={(node) => {
          return (
            <span
              style={{
                color: "#666",
              }}
            >
              {node.title}
            </span>
          );
        }}
        // 设置true后，父节点不会遗传选中效果，一般不常用；这个tree组件的特点就是快速批量选中
        // checkStrictly={true}
      />
      <Button
        style={{ margin: "10px" }}
        onClick={() => {
          console.log(
            "Button clicked",
            checkedKeys,
            selectedKeys,
            expandedKeys,
          );
        }}
      >
        Button
      </Button>
    </div>
  );
};
export default TreePage;