# @asup/tree-of-nodes 中文文档

规范地址：https://npmcn.com/package/%40asup/tree-of-nodes/

版本：3\.1\.1
npm 元数据更新时间：2026-10-13T07:54:17.332Z
中文译文更新时间：2026-11-08T11:08:56.615Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40asup/tree-of-nodes
原文对照：https://npmcn.com/package/%40asup/tree-of-nodes/?lang=original
项目主页：https://github.com/PaulDThomas/tree-of-nodes#readme
源码仓库：https://github.com/PaulDThomas/tree-of-nodes

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：125 kB，13 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0
- 首次发布：2022-11-06T18:37:51.958Z
- 最新版本发布：2026-10-13T07:54:17.167Z
- 近 30 天下载量：1795（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 3 个）

## 中文简介

REACT 字型树视图组件

## 安装

```sh
npm install @asup/tree-of-nodes
```

也可以使用：`pnpm add @asup/tree-of-nodes`、`yarn add @asup/tree-of-nodes`、`bun add @asup/tree-of-nodes`

## README

[![npm](https://img.shields.io/npm/v/@asup/tree-of-nodes)](https://www.npmjs.com/package/@asup/tree-of-nodes) [![size](https://packagephobia.now.sh/badge?p=@asup/tree-of-nodes)](https://packagephobia.now.sh/result?p=@asup/tree-of-nodes) ![npm bundle size](https://img.shields.io/bundlephobia/min/@asup/tree-of-nodes) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://raw.githubusercontent.com/PaulDThomas/tree-of-nodes/master/LICENCE)

# @asup/tree-of-notes (英语)

因为我找不到我想要的.

与/需要靴子,反应-靴子,反应-靴子相接. 使用上下文菜单来方便添加/重命名/移动动作.

## 安装

```
# with npm
npm install @asup/tree-of-nodes
```

## 节点树使用

```
import { iNodeUpdate, TreeNodeData, TreeOfNodes } from '@asup/tree-of-nodes';
import '@asup/tree-of-nodes/dist/style.css';

... inside REACT component

<TreeOfNodes<T>
  id: string;
  nodeList: TreeNodeData<T>[];
  roots: Key[];
  multiSelect?: boolean;
  selectedIds?: Key | Key[];
  handleSelect?: (ret: Key | Key []) => void;
  onAdd?: (parentId: Key, newName: string) => Promise<iNodeUpdate>;
  onRemove?: (childId: Key) => Promise<iNodeUpdate>;
  onRename?: (childId: Key, newName: string) => Promise<iNodeUpdate>;
  canRemoveRoot?: boolean;
  canRenameRoot?: boolean;
  canAddChildren?: boolean;
  canRemoveChildren?: boolean;
  canRenameChildren?: boolean;
  nodeHighlight?: string;
  textHighlight?: string;
  />
```

组件需要类型节点列表 `TreeNodeData<T>` 具有独特性 `React.Key`编号.

## 属性

| Prop | 说明 | 默认 |
| :-- | :-- | :-: |
| 编号 | HTML id 属性 |  |
| 节点列表 | 节点数据阵列 |  |
| 树根 | 一个或多个要用作树根的节点键 |  |
| 多选择 | 允许选择多于 1 id | `false` |
| 所选索引 | 当前选中列表 |  |
| 手柄选择 | 当一个节点被点击( 选中) 时调用函数, 用于更新选中的 Id | `() => {return;}` |
| 页:1 | 添加新节点时调用函数, 用于更新节点列表 |  |
| 移动 | 删除节点时调用函数, 用于更新节点列表 |  |
| 重命名时 | 当一个节点被重新命名时调用函数, 这应该用于更新节点列表 |  |
| 可以移动旋转 | 允许将根节点去除, 并结合关于 remove 函数的规格 | `false` |
| 可重命名旋转 | 允许将根节点重新命名, 并与关于 Rename 函数的规格相结合 | `false` |
| 儿童状况 | 允许增加儿童,同时说明关于Add的职能 | `false` |
| 迁移儿童 | 允许将非根节点的更名与关于再移动函数的规格相结合 | `false` |
| 可重命名儿童 | 允许将非根节点与关于再命名函数的规格合并重命名 | `false` |
| 节点突出 | 选定的节点突出显示颜色 | `red` |
| 文本突出显示 | 选中文本突出显示颜色 | `rgba(255,0,0,0.2` |
| 拼写检查 | 使用/ 禁用浏览器拼写检查 | "对" |

### 树节点数据

节点列表所要求的格式,包括任何类型数据的持有者,在 `TreeOfNodes` 规格.

```
export type TreeNodeData<T> = {
  id: Key;
  label: string;
  parentId?: Key;
  data: T;
};
```

### iNode 更新

使用此格式从更新函数返回 .

```
export interface iNodeUpdate {
  success: boolean;
  ErrorText?: string;
}
```

# 处理点击

在节点上点击上下文菜单将导致显示上下文菜单,同时显示"Add","Rename"和"Delete"选项.

点击扩展器将扩展或关闭节点的滑板

点击名称将选择该项目

点击复选框将选择该项目及其所有后人.

## 单项选择

为了处理所选择的一个(只有一个)项目,建议使用这些基本选项

```
  <TreeOfNodes<T>
    id={'...'}
    nodeList={[...]}
    roots={[...]}
    selected={selected}
    handleSelect={async (i) => {
      setSelected([i]);
    }}
  />
```

## 多项选择

为了处理多个选择,建议使用这些基本选项

```
  <TreeOfNodes<T>
    id={'...'}
    nodeList={[...]}
    roots={[...]}
    showCheckBox
    selected={selected}
    handleSelect={async (i) => {
      if (Array.isArray(i)) {
        setSelected(
          selected.includes(i[0])
            ? selected.filter((s) => !i.includes(s))
            : [...selected, ...i.filter((n) => !selected.includes(n))],
        );
      } else {
        setSelected(
          selected.includes(i) ? selected.filter((s) => s !== i) : [...selected, i],
        );
      }
    }}
  />
```

## 常见问题

### @asup/tree-of-nodes 是什么？

REACT 字型树视图组件

### 如何安装 @asup/tree-of-nodes？

在项目目录运行 npm install @asup/tree-of-nodes，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @asup/tree-of-nodes 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @asup/tree-of-nodes 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @asup/tree-of-nodes 可以商用吗？

@asup/tree-of-nodes 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @asup/tree-of-nodes 的下载量有多少？

根据 npm 官方下载统计，@asup/tree-of-nodes 在 2026/10/07 – 2026/11/05 这 30 天内被下载 1,795 次，日均约 60 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @asup/tree-of-nodes 还在维护吗？

最新版本 3\.1\.1 发布于 2026/10/13（26 天前）；至今共发布 21 个版本，其中过去 12 个月发布了 3 个；首次发布于 2022/11/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。