用ts代码实现antdesign的树形控件的可查找功能

以下是使用 TypeScript 实现 Ant Design 树形控件的可查找功能的示例代码：

import React, { useState } from 'react';
import { Tree, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { DataNode } from 'antd/lib/tree';

const { TreeNode } = Tree;
const { Search } = Input;

interface TreeProps {
  treeData: DataNode[];
}

const SearchableTree: React.FC<TreeProps> = ({ treeData }) => {
  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
  const [searchValue, setSearchValue] = useState<string>('');
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);

  const onExpand = (keys: string[]) => {
    setExpandedKeys(keys);
    setAutoExpandParent(false);
  };

  const getParentKey = (key: string, tree: DataNode[]): string | undefined => {
    let parentKey;
    for (const node of tree) {
      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 generateTreeNodes = (data: DataNode[]): React.ReactNode[] =>
    data.map((item) => {
      const { key, title, children } = item;
      const itemTitle = (
        <span>
          {title}
          {key === searchValue && (
            <span style={{ color: 'blue', marginLeft: '5px' }}> (found)</span>
          )}
        </span>
      );
      if (children) {
        return (
          <TreeNode key={key} title={itemTitle}>
            {generateTreeNodes(children)}
          </TreeNode>
        );
      }
      return <TreeNode key={key} title={itemTitle} />;
    });

  const onSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    const expandedKeys: string[] = [];
    const loop = (data: DataNode[]) => {
      data.forEach((item) => {
        if (item.title?.toString().indexOf(value) > -1) {
          const parentKey = getParentKey(item.key, treeData);
          if (parentKey) {
            expandedKeys.push(parentKey);
          }
        }
        if (item.children) {
          loop(item.children);
        }
      });
    };
    loop(treeData);
    setSearchValue(value);
    setExpandedKeys(expandedKeys);
    setAutoExpandParent(true);
  };

  return (
    <div>
      <Search
        placeholder="Search"
        allowClear
        prefix={<SearchOutlined />}
        onChange={onSearch}
        style={{ width: '100%', marginBottom: '1rem' }}
      />
      <Tree
        onExpand={onExpand}
        expandedKeys={expandedKeys}
        autoExpandParent={autoExpandParent}
        treeData={generateTreeNodes(treeData)}
      />
    </div>
  );
};

export default SearchableTree;

这个组件接收一个 `treeData` 属性，表示树形控件的数据源。在组件内部，使用 `useState` 定义了一些状态：

- `expandedKeys`: 当前展开的节点 key 数组。
- `searchValue`: 当前搜索框的值。
- `autoExpandParent`: 是否自动展开父节点。
- `setExpandedKeys`: 更新 `expandedKeys` 状态的函数。
- `setSearchValue`: 更新 `searchValue` 状态的函数。
- `setAutoExpandParent`: 更新 `autoExpandParent` 状态的函数。

当用户在搜索框中输入内容时，会触发 `onSearch` 函数。这个函数会遍历树形控件的数据源，查找所有包含搜索关键字的节点，并将它们的父节点展开。最后，更新 `expandedKeys` 和 `autoExpandParent` 状态，以便重新渲染树形控件。

在渲染树形控件时，使用 `generateTreeNodes` 函数递归生成每个节点的 UI。对于包含搜索关键字的节点，会在标题后面添加一个 “(found)” 的文本，用蓝色字体标识。