【React+TS-tree组件】

试用vscode的chat-gpt中文版编写，做了一点修改

1. 创建 React 组件

创建一个名为 Tree 的 React 组件。在此组件中，可以定义你的状态和props类型，并使用 TypeScript 类型注释来提高代码的可读性。

import React, { useState } from 'react';

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

interface TreeProps {
  nodes: TreeNode[];
}

const Tree: React.FC<TreeProps> = ({ nodes }) => {
  const [expandedNodeIds, setExpandedNodeIds] = useState<string[]>([]);

  return (
    <ul>
      {nodes.map((node) => (
        <TreeNode
          key={node.id}
          node={node}
          isExpanded={expandedNodeIds.includes(node.id)}
          onToggle={() =>
            setExpandedNodeIds(
              expandedNodeIds.includes(node.id)
                ? expandedNodeIds.filter((id) => id !== node.id)
                : [...expandedNodeIds, node.id]
            )
          }
        />
      ))}
    </ul>
  );
};

2. 创建 TreeNode 组件

创建一个名为 TreeNode 的 React 组件，它将呈现单个树节点和其子节点（如果存在）。可以使用 TypeScript 类型注释来定义组件的状态和 props。

interface TreeNodeProps {
  node: TreeNode;
  isExpanded: boolean;
  onToggle: () => void;
}

const TreeNode: React.FC<TreeNodeProps> = ({ node, isExpanded, onToggle }) => (
  <li>
    <div onClick={onToggle}>
      {node.children && node.children.length>0 && (isExpanded ? '-' : '+')} {node.name}
    </div>
    {isExpanded && node.children && node.children.length>0 && (
      <ul>
        {node.children.map((childNode) => (
          <TreeNode
            key={childNode.id}
            node={childNode}
            isExpanded={isExpanded}
            onToggle={onToggle}
          />
        ))}
      </ul>
    )}
  </li>
);

3. 在应用程序中使用 Tree 组件

将 Tree 组件添加到应用程序中，并传递想要呈现的树形结构数据。

const treeData = [
  {
    id: '1',
    name: 'Node 1',
    children: [
      {
        id: '2',
        name: 'Node 2',
        children: [
          {
            id: '3',
            name: 'Node 3',
          },
        ],
      },
      {
        id: '4',
        name: 'Node 4',
      },
    ],
  },
];

function App() {
  return <Tree nodes={treeData} />;
}

export default App;