手写一个树形组件

好的，以下是一个简单的树形组件的实现，使用了 React 和 TypeScript：

import React, { useState } from 'react';

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

interface Props {
  data: TreeNode[];
}

const Tree: React.FC<Props> = ({ data }) => {
  const [expanded, setExpanded] = useState<number[]>([]);

  const toggle = (id: number) => {
    if (expanded.includes(id)) {
      setExpanded(expanded.filter((item) => item !== id));
    } else {
      setExpanded([...expanded, id]);
    }
  };

  const renderTree = (nodes: TreeNode[]) => {
    return nodes.map((node) => (
      <div key={node.id}>
        <div onClick={() => toggle(node.id)}>
          {node.children ? <span>{expanded.includes(node.id) ? '-' : '+'}</span> : <span>&nbsp;&nbsp;</span>}
          <span>{node.name}</span>
        </div>
        {node.children && expanded.includes(node.id) && renderTree(node.children)}
      </div>
    ));
  };

  return <div>{renderTree(data)}</div>;
};

export default Tree;

这个组件接收一个 `data` 属性，其中包含了树形结构的数据。组件内部使用了 `useState` 来追踪哪些节点是展开的，然后根据展开状态来渲染节点和子节点。当点击一个节点时，会触发 `toggle` 方法，该方法会更新展开状态数组 `expanded`。最后，调用 `renderTree` 方法将树形结构渲染成 DOM 元素。