Ant.Design Tree 组件打造强大树形搜索功能: 赋能高效数据浏览

2023-01-28 03:52:00

如何使用 Ant.Design Tree 组件构建强大的可搜索树形结构

用 Tree 组件轻松实现数据过滤

Ant.Design Tree 组件是 React 开发人员的福音，它提供了构建树形结构的强大功能，可用于各种数据展示场景，如文件系统、组织结构图或产品分类。借助其丰富的 API 和强大的功能，您可以轻松创建和自定义树形结构，提升用户体验和数据交互效率。

打造可搜索树的四大步骤

创建可搜索树的过程并不复杂，只需遵循以下四个步骤即可：

安装 Ant.Design 库

npm install antd

导入 Tree 和 Search 组件

import { Tree, Search } from 'antd';

创建树形结构数据

这是您要展示的数据，通常是 JSON 格式的层次结构，如下所示：

const treeData = [
  {
    title: 'Parent Node 1',
    key: '1',
    children: [
      {
        title: 'Child Node 1.1',
        key: '1.1',
      },
      {
        title: 'Child Node 1.2',
        key: '1.2',
      },
    ],
  },
  {
    title: 'Parent Node 2',
    key: '2',
    children: [
      {
        title: 'Child Node 2.1',
        key: '2.1',
      },
      {
        title: 'Child Node 2.2',
        key: '2.2',
      },
    ],
  },
];

创建可搜索树组件

现在，让我们构建核心组件：

const SearchableTree = () => {
  const [searchText, setSearchText] = useState('');
  const [treeData, setTreeData] = useState(treeData);

  const onSearch = (e) => {
    setSearchText(e.target.value);
    const filteredTreeData = treeData.filter((node) => node.title.includes(searchText));
    setTreeData(filteredTreeData);
  };

  return (
    <>
      <Search placeholder="Search for a node" onChange={onSearch} />
      <Tree treeData={treeData} />
    </>
  );
};