已知现在有一个树形控件，请帮我用react+typescript+Ant Design+umi的开发框架实现可以被树形控件引入复用的搜索树的搜索框

好的，我可以帮您实现。我们将创建一个可复用的搜索框组件，它可以被其他树形控件引入使用。以下是一个简单的实现示例：

import React from "react";
import { Input } from "antd";

const { Search } = Input;

interface SearchBoxProps {
  onSearch: (value: string) => void;
}

const SearchBox: React.FC<SearchBoxProps> = ({ onSearch }) => {
  // 搜索框onChange事件
  const handleSearch = (value: string) => {
    onSearch(value);
  };

  return (
    <div>
      <Search
        placeholder="Search"
        onSearch={handleSearch}
        style={{ width: 200 }}
      />
    </div>
  );
};

export default SearchBox;

我们可以使用以上组件，将onSearch回调函数传入SearchBox组件中，当搜索框值发生变化时，调用onSearch回调函数进行搜索。以下是一个树形控件如何引入SearchBox组件并进行搜索的示例：

import React, { useState } from "react";
import { Tree, message } from "antd";
import { DataNode } from "antd/lib/tree";
import SearchBox from "./SearchBox";

interface SearchableTreeProps {
  treeData: DataNode[];
}

const SearchableTree: React.FC<SearchableTreeProps> = ({ treeData }) => {
  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
  const [searchValue, setSearchValue] = useState<string>("");

  // 递归过滤树节点
  const filterTree = (tree: DataNode[], searchValue: string): DataNode[] => {
    return tree
      .filter((node) => node.title?.includes(searchValue))
      .map((node) => ({
        ...node,
        children: node.children ? filterTree(node.children, searchValue) : null,
      }));
  };

  // 搜索框onChange事件
  const handleSearch = (value: string) => {
    const expandedKeys = treeData
      .map((node) => {
        if (node.title?.includes(value)) {
          return node.key;
        }
        if (node.children) {
          return filterTree(node.children, value).map((child) => child.key);
        }
        return null;
      })
      .flat()
      .filter((key) => key) as string[];
    setExpandedKeys(expandedKeys);
    setSearchValue(value);
  };

  // 树节点展开事件
  const handleExpand = (expandedKeys: string[]) => {
    setExpandedKeys(expandedKeys);
  };

  return (
    <div>
      <SearchBox onSearch={handleSearch} />
      <Tree
        treeData={filterTree(treeData, searchValue)}
        expandedKeys={expandedKeys}
        onExpand={handleExpand}
        onSelect={(keys) => message.success(keys.join(","))}
      />
    </div>
  );
};

export default SearchableTree;

我们可以看到，在SearchableTree组件中，我们将SearchBox组件引入，并将handleSearch回调函数传入SearchBox组件中，当搜索框值发生变化时，调用handleSearch回调函数进行搜索。