帮我用react+typescript+antdesign实现树型数据筛选，过滤,和查找某一个，从树型数据中把所有的子节点取出来

好的，我可以给你提供一些思路和代码示例。

首先，你需要一个包含树型数据的数据源，可以是一个数组，每个元素包含一个节点的信息和它的子节点信息。例如：

interface TreeNode {
  id: string;
  name: string;
  children: TreeNode[];
}

const dataSource: TreeNode[] = [
  {
    id: "1",
    name: "Node 1",
    children: [
      {
        id: "1-1",
        name: "Node 1-1",
        children: []
      },
      {
        id: "1-2",
        name: "Node 1-2",
        children: [
          {
            id: "1-2-1",
            name: "Node 1-2-1",
            children: []
          }
        ]
      }
    ]
  },
  {
    id: "2",
    name: "Node 2",
    children: []
  }
];

然后，你需要在组件中渲染这个数据源，可以使用 `antd` 的 `Tree` 组件，例如：

import React, { useState } from "react";
import { Tree } from "antd";
import { TreeNode } from "./types";

interface Props {
  dataSource: TreeNode[];
}

const FilterableTree: React.FC<Props> = ({ dataSource }) => {
  const [searchValue, setSearchValue] = useState("");
  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);

  const filterTreeNode = (node: TreeNode): boolean => {
    if (node.name.toLowerCase().includes(searchValue.toLowerCase())) {
      return true;
    }
    return node.children.some(filterTreeNode);
  };

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.target.value);
  };

  const handleExpand = (keys: string[]) => {
    setExpandedKeys(keys);
  };

  const renderTreeNodes = (nodes: TreeNode[]): React.ReactNode => {
    return nodes.map(node => (
      <Tree.TreeNode key={node.id} title={node.name}>
        {renderTreeNodes(node.children)}
      </Tree.TreeNode>
    ));
  };

  const getDescendants = (node: TreeNode): TreeNode[] => {
    return [node, ...node.children.flatMap(getDescendants)];
  };

  const handleSelect = (selectedKeys: string[]) => {
    const selectedNode = dataSource.find(node => node.id === selectedKeys[0]);
    if (selectedNode) {
      const descendants = getDescendants(selectedNode);
      console.log(descendants);
    }
  };

  const filteredDataSource = dataSource.filter(filterTreeNode);

  return (
    <>
      <input type="text" value={searchValue} onChange={handleSearch} />
      <Tree
        expandedKeys={expandedKeys}
        autoExpandParent={true}
        onExpand={handleExpand}
        onSelect={handleSelect}
      >
        {renderTreeNodes(filteredDataSource)}
      </Tree>
    </>
  );
};

export default FilterableTree;

在这个组件中，我们通过 `useState` 来管理搜索框的值和展开的节点，通过 `filterTreeNode` 函数来过滤节点和它的子节点，通过 `renderTreeNodes` 函数来递归渲染树形结构，通过 `getDescendants` 函数来获取一个节点的所有子孙节点。注意，在 `handleSelect` 函数中，我们通过 `getDescendants` 函数来获取选中节点的所有子孙节点，并将它们打印到控制台上。

最后，你可以在组件中使用这个数据源来渲染树形结构，例如：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import FilterableTree from "./FilterableTree";
import { TreeNode } from "./types";

const dataSource: TreeNode[] = [
  {
    id: "1",
    name: "Node 1",
    children: [
      {
        id: "1-1",
        name: "Node 1-1",
        children: []
      },
      {
        id: "1-2",
        name: "Node 1-2",
        children: [
          {
            id: "1-2-1",
            name: "Node 1-2-1",
            children: []
          }
        ]
      }
    ]
  },
  {
    id: "2",
    name: "Node 2",
    children: []
  }
];

ReactDOM.render(
  <FilterableTree dataSource={dataSource} />,
  document.getElementById("root")
);

当你运行这个应用程序时，在搜索框中输入关键字，你会看到树形结构被过滤了，当你选择一个节点时，你会在控制台上看到这个节点的所有子孙节点。