typescript antd 做树选择器

以下是使用TypeScript和Antd实现树选择器的示例代码：

import React, { useState } from "react";
import { TreeSelect } from "antd";

const { TreeNode } = TreeSelect;

interface TreeData {
  title: string;
  value: string;
  key: string;
  children?: TreeData[];
}

const treeData: TreeData[] = [
  {
    title: "Node1",
    value: "0-0",
    key: "0-0",
    children: [
      {
        title: "Child Node1",
        value: "0-0-1",
        key: "0-0-1",
      },
      {
        title: "Child Node2",
        value: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
  {
    title: "Node2",
    value: "0-1",
    key: "0-1",
  },
];

const TreeSelectDemo = () => {
  const [value, setValue] = useState<string[]>([]);

  const onChange = (value: string[]) => {
    setValue(value);
  };

  const renderTreeNodes = (data: TreeData[]) =>
    data.map((item) => {
      if (item.children) {
        return (
          <TreeNode value={item.value} title={item.title} key={item.key}>
            {renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode value={item.value} title={item.title} key={item.key} />;
    });

  return (
    <TreeSelect
      showSearch
      style={{ width: "100%" }}
      value={value}
      dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
      placeholder="Please select"
      allowClear
      multiple
      treeDefaultExpandAll
      onChange={onChange}
    >
      {renderTreeNodes(treeData)}
    </TreeSelect>
  );
};

export default TreeSelectDemo;