6. 树（Tree）

6. 树（Tree）

示例场景：创建一个简单的文件夹树组件，允许用户展开和折叠文件夹。

import React, { useState } from "react";

// 定义文件夹树的结构
const folderTree = [
  {
    name: "Documents",
    children: [{ name: "Work" }, { name: "Personal" }],
  },
  {
    name: "Pictures",
    children: [{ name: "Vacation" }, { name: "Family" }],
  },
];

function FolderTree({ folders }) {
  const [expandedFolders, setExpandedFolders] = useState([]);

  const toggleFolder = (folderName) => {
    if (expandedFolders.includes(folderName)) {
      setExpandedFolders(expandedFolders.filter((f) => f !== folderName));
    } else {
      setExpandedFolders([...expandedFolders, folderName]);
    }
  };

  const renderFolder = (folder) => (
    <div key={folder.name}>
      <div onClick={() => toggleFolder(folder.name)}>
        {expandedFolders.includes(folder.name) ? "▼" : "▶"} {folder.name}
      </div>
      {expandedFolders.includes(folder.name) && folder.children && (
        <div style={{ marginLeft: 20 }}>
          {folder.children.map(renderFolder)}
        </div>
      )}
    </div>
  );

  return <div>{folders.map(renderFolder)}</div>;
}

function App() {
  return (
    <div>
      <h1>文件夹树</h1>
      <FolderTree folders={folderTree} />
    </div>
  );
}

export default App;