Custom Tree Component Library

一个轻量级、可定制的React树形组件库，支持层级选择和状态管理。

特性

• 🌳 层级结构：支持无限层级嵌套的树形结构
• ✅ 联动选择：父节点选择时自动选中/取消选中所有子节点
• 📦 轻量级：无额外依赖，仅需React环境
• 🔧 可定制：灵活的API和样式定制能力
• 📱 响应式：适配各种屏幕尺寸

安装

npm install custom-ui-hyf
# 或
yarn add custom-ui-hyf

快速开始

import { Tree } from "custom-ui-hyf";

const App = () => {
  const treeData = [
    {
      id: 1,
      name: "Parent Node",
      selected: false,
      children: [
        {
          id: 2,
          name: "Child Node 1",
          selected: false,
          children: [
            {
              id: 4,
              name: "Grandchild Node",
              selected: false,
              children: [],
            },
          ],
        },
        {
          id: 3,
          name: "Child Node 2",
          selected: false,
          children: [],
        },
      ],
    },
  ];

  const handleNodeChange = (node) => {
    console.log("Selected node:", node);
  };

  return (
    <div>
      <Tree data={treeData} onChange={handleNodeChange} />
    </div>
  );
};

export default App;

API

Props

| 属性 | 类型 | 描述 | 必填 | | ---------- | -------------------------- | ------------------------ | ---- | | data | TreeNode[] | 树形数据数组 | ✅ | | onChange | (node: TreeNode) => void | 节点状态改变时的回调函数 | ✅ |

TreeNode

| 属性 | 类型 | 描述 | 必填 | | ---------- | ------------------ | ------------ | ---- | | id | string \| number | 唯一标识符 | ✅ | | name | string | 节点显示名称 | ✅ | | children | TreeNode[] | 子节点数组 | ✅ | | selected | boolean | 是否选中状态 | ✅ |

功能说明

• 父节点联动：当选中或取消选中父节点时，其所有子节点会自动同步选中状态
• 独立状态：每个节点都有独立的选中状态，可以在叶子节点级别进行精确控制
• 状态持久化：组件内部维护完整的选择状态，无需外部状态管理

自定义样式

组件提供基础CSS类名，你可以通过覆盖样式来自定义外观：

.tree-node {
  /* 自定义子节点容器样式 */
  margin-left: 20px;
}

.tree-node input[type="checkbox"] {
  /* 自定义复选框样式 */
}

.tree-node span {
  /* 自定义节点文本样式 */
  margin-left: 8px;
}

开发

克隆仓库并安装依赖：

git clone <repository-url>
cd custom-ui-hyf
npm install

启动开发服务器：

npm run dev

构建生产版本：

npm run build

贡献

欢迎提交 issue 和 pull request 来改进这个组件库！

许可证

MIT