# @asseinfo/react-kanban 中文文档

规范地址：https://npmcn.com/package/%40asseinfo/react-kanban/

版本：2\.2\.0
npm 元数据更新时间：2022-04-04T15:50:50.573Z
中文译文更新时间：2026-11-07T00:14:37.968Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：163 kB，5 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：1 个
- peer 依赖：react ^16\.8\.0 \|\| ^17\.0\.0，react-dom ^16\.8\.0 \|\| ^17\.0\.0
- 首次发布：2021-06-23T19:06:19.871Z
- 最新版本发布：2021-09-22T19:45:40.077Z
- 近 30 天下载量：17824（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

又一个Kanban/Trello board lib for React. 康班/特雷罗董事会发布反弹.

## 安装

```sh
npm install @asseinfo/react-kanban
```

也可以使用：`pnpm add @asseinfo/react-kanban`、`yarn add @asseinfo/react-kanban`、`bun add @asseinfo/react-kanban`

## README

[![Maintainability](https://api.codeclimate.com/v1/badges/c602758e03850fdb8b64/maintainability)](https://codeclimate.com/github/lourenci/react-kanban/maintainability) [![Test Coverage](https://codecov.io/gh/lourenci/react-kanban/branch/main/graph/badge.svg)](https://codecov.io/gh/lourenci/react-kanban) [![Build Status](https://github.com/lourenci/react-kanban/workflows/Test/badge.svg?branch=main)](https://github.com/lourenci/react-kanban/actions?query=branch%3Amain+workflow%3ATest) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com/)

又一个Kanban/Trello board lib for React. 康班/特雷罗董事会发布反弹.

![Kanban Demo](https://i.imgur.com/yceKUEp.gif)

### 德莫语

[使用量](https://nvjp3.csb.app/)

[![Edit react-kanban-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-kanban-demo-nvjp3)

## 为什么?

-   可靠性:在CI上检测100%;覆盖率为100%;SemVer100%.
-   和虎克一起玩游戏 ~样式组件~。 。 。 .
-   QQ可访问:键盘和移动友好.
-   ++:用于项目.

## 🛠 安装和使用

由于这个项目使用Hooks,你必须安装它们:

-   `react>=16.8.5`

之后, 在您的工程上安装 lib :

```bash
yarn add @asseinfo/react-kanban
```

导入 lib 并将其用于您的工程 :

```js
import Board from '@asseinfo/react-kanban'
import '@asseinfo/react-kanban/dist/styles.css'

const board = {
  columns: [
    {
      id: 1,
      title: 'Backlog',
      cards: [
        {
          id: 1,
          title: 'Add card',
          description: 'Add capability to add a card in a column'
        },
      ]
    },
    {
      id: 2,
      title: 'Doing',
      cards: [
        {
          id: 2,
          title: 'Drag-n-drop support',
          description: 'Move a card between the columns'
        },
      ]
    }
  ]
}

<Board initialBoard={board} />
```

## • API

### \* 受管制和不受管制

当你需要更好的控制板时,你应该坚持控制板. 控制板意味着你需要 处理板自己, 你需要保持状态 在你的手中(组件) 并将状态传递给 `<Board />`我们只是反映这个状态. 这也意味着更复杂一点,尽管我们提供了一些帮助来应对棋盘形状. 你可以在React Docs中读取更多内容, [这里](https://reactjs.org/docs/forms.html#controlled-components) 财务报告和审定财务报表 [这里](https://reactjs.org/docs/uncontrolled-components.html)。 。 。 .

如果你跟受控者走,你需要通过你的板子 `children` 道具,否则你需要通过它 `initialBoard` 道具 (英语).

#### 协助控制板工作

我们揭露一些API 你可以导入 帮助你工作 在控制状态。 这些和我们内部用来管理无控制板的API相同. 我们真的建议你使用它们, 他们100%的单位测试, 他们不做任何副作用 你的董事会状态.

要使用它们,你只需要 导入它们与你的板:

```js
import Board, { addCard, addColumn, ... } from '@asseinfo/react-kanban'
```

**所有需要通过董事会的助手, 他们将返回一个新的董事会 传递到你的州:**

```js
import Board, { addColumn } from '@asseinfo/react-kanban'
...
const [board, setBoard] = useState(initialBoard)
...
const newBoard = addColumn(board, newColumn)
setBoard(newBoard)
...
<Board>{board}</Board>
```

[可以在道具文档结尾处看到帮助者名单.](https://npmcn.com/package/%40asseinfo/react-kanban/#readme--helpers-to-be-used-with-an-controlled-board)

### 棋盘形状

```js
{
  columns: [{
    id: ${unique-required-columnId},
    title: {$required-columnTitle**},
    cards: [{
      id: ${unique-required-cardId},
      title: ${required-cardTitle*}
      description: ${required-description*}
    }]
  }]
}
```

\* 决 定 `title` 编辑 `description` 如果您使用卡片的默认模板,则需要使用。 您可以通过 [`renderCard`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-rendercard) 道具 (英语).

\*\* 联合国 `title` 如果您正在使用列的默认模板,则需要该模板。 您可以通过 [`renderColumnHeader`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-rendercolumnheader) 道具 (英语).

### ++ Propals 软件

| Prop | 说明 | 已控制 | 无控制 |
| --- | --- | --- | --- |
| [`children`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-children) (如果受控制则需要) | 董事会 | ✅ | 🚫 |
| [`initialBoard`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-initialboard) (如果不受控制则需要) | 董事会 | 🚫 | ✅ |
| [`onCardDragEnd`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-oncarddragend) | 卡片移动结束时会调用回话 | ✅ | ✅ |
| [`onColumnDragEnd`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-oncolumndragend) | 当列移动结束时调用 | ✅ | ✅ |
| [`renderCard`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-rendercard) | 要制作的卡片而不是默认卡片 | ✅ | ✅ |
| [`renderColumnHeader`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-rendercolumnheader) | 要打开的列头代替默认的列头 | ✅ | ✅ |
| [`allowAddColumn`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-allowaddcolumn) | 允许用户添加新一列 | ✅ | ✅ |
| [`onNewColumnConfirm`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-onnewcolumnconfirm) (如果使用默认列添加模板则需要) | 当用户通过默认的列添加模板确认新列时调用回调 | ✅ | ✅ |
| [`onColumnNew`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-oncolumnnew) (如果 `allowAddColumn` 或何时 [`addColumn`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-rendercolumnadder) 名为) | 通过默认的列添加模板添加新一列时将调用回调 | 🚫 | ✅ |
| [`renderColumnAdder`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-rendercolumnadder) | 要提供的列添加器而不是默认列添加器模板 | ✅ | ✅ |
| [`disableColumnDrag`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-disablecolumndrag) | 禁用列移动 | ✅ | ✅ |
| [`disableCardDrag`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-disablecarddrag) | 禁用卡片移动 | ✅ | ✅ |
| [`allowRemoveColumn`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-allowremovecolumn) | 允许删除默认列标题中的一列 | ✅ | ✅ |
| [`onColumnRemove`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-oncolumnremove) (如果 `allowRemoveColumn` 或何时 [`removeColumn`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-rendercolumnheader) 名为) | 删除一列时会调用的回调 | ✅ | ✅ |
| [`allowRenameColumn`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-allowrenamecolumn) | 允许在默认列标题中重命名一列 | ✅ | ✅ |
| [`onColumnRename`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-oncolumnrename) (如果 `allowRenameColumn` 或何时 [`renameColumn`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-rendercolumnheader) 名为) | 重命名列时调用 | ✅ | ✅ |
| [`allowRemoveCard`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-allowremovecard) | 允许删除默认卡模板中的卡片 | ✅ | ✅ |
| [`onCardRemove`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-oncardremove) (如果 `allowRemoveCard`(中文(简体) ) | 取消卡片时会调用回电 | ✅ | ✅ |
| [`allowAddCard`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-allowaddcard) | 允许加卡. 期望在列中添加卡片的位置对象 . | 🚫 | ✅ |
| [`onCardNew`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-oncardnew) (如果 `allowAddCard` 或何时 [`addCard`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-rendercolumnheader) 名为) | 通过默认的卡加模板添加出新卡时会调用的回调 | 🚫 | ✅ |
| [`onNewCardConfirm`](https://npmcn.com/package/%40asseinfo/react-kanban/#readme-onnewcardconfirm) (如果 `allowAddCard`(中文(简体) ) | 用户通过默认的卡加模板确认新卡时调取的回调 | 🚫 | ✅ |

#### `children`

董事会 如果您想要控制董事会状态, 请使用此道具 .

#### `initialBoard`

董事会 如果您不想控制董事会状态, 请使用此道具 .

#### `onCardDragEnd`

当用户移动卡片时,这种回调会被称为通过这些参数:

| 参数 | 说明 |
| --- | --- |
| `board` | 修改后的棋盘 |
| `card` | 移动的牌 |
| `source` | 带有卡片源的对象 `{ fromColumnId, fromPosition }` |
| `destination` | 具有卡片目的对象 `{ toColumnId, toPosition }` |

##### 来源和目的地

| Prop | 说明 |
| --- | --- |
| `fromColumnId` | 列源代码. |
| `toColumnId` | 列目标 ID . |
| `fromPosition` | 列源数组中的卡片索引 . |
| `toPosition` | 卡片在列目的阵列中的索引. |

#### `onColumnDragEnd`

当用户移动一列时,这种回调将被称作通过这些参数:

| 参数 | 说明 |
| --- | --- |
| `board` | 修改后的棋盘 |
| `column` | 移动的一栏 |
| `source` | 带有列源对象 `{ fromPosition }` |
| `destination` | 带有列目的对象 `{ toPosition }` |

##### 来源和目的地

| Prop | 说明 |
| --- | --- |
| `fromPosition` | 移动前的列索引 . |
| `toPosition` | 移动后的列索引. |

#### `renderCard`

如果您想要制作自己的名片, 请使用此功能 。 您需要通过一个函数并返回您的卡片组件 . 该函数将接收这些参数:

| 参数 | 说明 |
| --- | --- |
| `card` | 纸牌道具 |
| `cardBag` | 带有一些辅助功能的包, 并声明可以使用此卡 |

##### `cardBag`

| 函数 | 说明 |
| --- | --- |
| `removeCard*` | 调用此函数从列中移除卡 |
| `dragging` | 牌是否被拖动 |

\* 当董事会被控制时,它不可用.

说明:

```js
const board = {
  columns: [{
    id: ${unique-required-columnId},
    title: ${columnTitle},
    cards: [{
      id: ${unique-required-cardId},
      dueDate: ${cardDueDate},
      content: ${cardContent}
    }]
  }]
}

<Board
  renderCard={({ content }, { removeCard, dragging }) => (
    <YourCard dragging={dragging}>
      {content}
      <button type="button" onClick={removeCard}>Remove Card</button>
    </YourCard>
  )}
>
{board}
</Board>
```

#### `renderColumnHeader`

如果您想要制作自己的列头, 请使用此选项 。 您需要通过一个函数并返回您的列标题组件 . 该函数将接收这些参数:

| 参数 | 说明 |
| --- | --- |
| `column` | 栏道具 |
| `columnBag` | 带有一些辅助功能的包与列配合 |

##### `columnBag`

| 函数 | 说明 |
| --- | --- |
| `removeColumn*` | 调用此函数以删除棋盘中的列 |
| `renameColumn*` | 使用标题调用此函数以重命名列 |
| `addCard*` | 用新卡调用此函数可添加到列中 |

**`addCard`**: 作为第二个参数, 您可以通过一个选项来定义要添加卡片的列中的位置 :

-   `{ on: 'top' }`: 在栏上方添加.
-   `{ on: 'bottom' }`: 在列下方添加(默认).

\* 当董事会被控制时,它不可用.

说明:

```js
const board = {
  columns: [{
    id: ${unique-required-columnId},
    title: ${columnTitle},
    wip: ${wip},
    cards: [{
      id: ${unique-required-cardId},
      title: ${required-cardTitle},
      description: ${required-cardDescription}
    }]
  }]
}

<Board
  renderColumnHeader={({ title }, { removeColumn, renameColumn, addCard }) => (
    <YourColumnHeader>
      {title}
      <button type='button' onClick={removeColumn}>Remove Column</button>
      <button type='button' onClick={() => renameColumn('New title')}>Rename Column</button>
      <button type='button' onClick={() => addCard({ id: 99, title: 'New Card' })}>Add Card</button>
    </YourColumnHeader
  )}
>
  {board}
</Board>
```

#### `allowAddColumn`

允许用户直接由棋盘添加一新列.

#### `onNewColumnConfirm`

当用户通过默认的列添加器模板确认一列新时,此回调将使用由用户键入的标题的列草稿来调用.

如果你的董事会不控制你 **必须** 返回此调用中的新列及其新编号.

如果您的棋盘被控制, 请使用它来获取新的列标题 .

说明:

```js
function onColumnNew (newColumn) {
  const newColumn = { id: ${required-new-unique-columnId}, ...newColumn }
  return newColumn
}

<Board initialBoard={board} allowAddColumn onColumnNew={onColumnNew} />
```

#### `onColumnNew`

当用户通过默认的列添加器模板添加出一新列时,这种回调将被称为通过更新的板和新列.

这种回调不会在不受控制的板上被调用.

#### `renderColumnAdder`

如果您想要制作自己的列添加器, 请使用此选项 。 您需要通过一个函数并返回您的列添加组件. 该函数将接收这些参数:

| 参数 | 说明 |
| --- | --- |
| `columnBag` | 带有一些助手功能的包 |

##### `columnBag`

| 函数 | 说明 |
| --- | --- |
| `addColumn*` | 用新列调用此函数以添加新列 |

\* 当董事会被控制时,它不可用.

说明:

```js
const ColumnAdder = ({ addColumn }) {
  return (
    <div onClick={()=> addColumn({id: ${required-new-unique-columnId}, title: 'Title', cards:[]})}>
      Add column
    </div>
  )
}

<Board
  allowAddColumn
  renderColumnAdder={({ addColumn }) => <ColumnAdder addColumn={addColumn} />}
  {board}
</Board>
```

#### `disableColumnDrag`

取消用户移动一列的功能.

#### `disableCardDrag`

取消用户的卡片移动功能 .

#### `allowRemoveColumn`

使用默认页眉模板时,不通过模板 `renderColumnHeader`,它将允许用户删除一列.

#### `onColumnRemove`

当用户删除一列时,此回调将被称作通过这些参数:

| 参数 | 说明 |
| --- | --- |
| `board` | 没有被删除一栏的棋盘 |
| `column` | 删除的一栏 |

#### `allowRenameColumn`

使用默认页眉模板时,不通过模板 `renderColumnHeader`,它将允许用户重命名一列.

#### `onColumnRename`

当用户重命名一列时,此回调将被称为通过这些参数:

| 参数 | 说明 |
| --- | --- |
| `board` | 带有更名栏的棋盘 |
| `column` | 重命名的一栏 |

#### `allowRemoveCard`

当使用默认的卡片模板时, 当您没有通过模板时 `renderCard`,它将允许用户去除一张卡.

#### `onCardRemove`

当用户去掉一卡时,这种回调将被称为通过这些参数:

| 参数 | 说明 |
| --- | --- |
| `board` | 没有被删除一栏的棋盘 |
| `column` | 没有取出卡片的列 |
| `card` | 被移除的卡片 |

#### `allowAddCard`

允许用户直接由棋盘在列中添加一卡. 默认情况下,它会在列下方添加卡片,但您可以通过"上"道具通过一个对象来指定您是想要在棋盘上方还是下方添加.

例如: / 默认位于下方 < Board 允许 AddCard}\\: 在列下方的“ 下方” / > / 上 <BOARD 允许AddCard> 上 : 'top' / > / 在列上方

### 用于控制板的助手

#### `moveColumn`

| 参数 | 说明 |
| --- | --- |
| `board` | 你的董事会 |
| `{ fromPosition }` | 待移行索引 |
| `{ toPosition }` | 要移动的列的索引目的地 |

#### `moveCard`

在受控板上使用这个,"从"和"从"是同一种传递给"CardDragEnd"的回调. 您可以在您的 onCardDragEnd 调用中使用此功能, 以更新您的棋盘, 因为它将返回一个新的棋盘, 您可以将它保存到状态 .

| 参数 | 说明 |
| --- | --- |
| `board` | 你的董事会 |
| `{ fromPosition, fromColumnId }` | 带有卡片源的对象 `{ fromColumnId, fromPosition }` 这些是卡片当前位置的索引 |
| `{ toPosition, toColumnId }` | 具有卡片目的对象 `{ fromColumnId, fromPosition }` 它们是卡片的索引新位置 |

#### `addColumn`

| 参数 | 说明 |
| --- | --- |
| `board` | 你的董事会 |
| `column` | 待加栏 |

#### `removeColumn`

| 参数 | 说明 |
| --- | --- |
| `board` | 你的董事会 |
| `column` | 要删除的列 |

#### `changeColumn`

| 参数 | 说明 |
| --- | --- |
| `board` | 你的董事会 |
| `column` | 要重命名的列 |
| `object` | 传递要与列合并的对象。 您可以添加新的道具和/或更改现有的道具 |

#### `addCard`

| 参数 | 说明 |
| --- | --- |
| `board` | 你的董事会 |
| `inColumn` | 添加卡片的列 |
| `card` | 将加卡 |
| \-=ytet -伊甸园字幕组=- 翻译: | {\\fn黑体\\fs20\\shad2\\2ah82\\3ah20\\4ah33\\fscx95\\3ch592001\\be1}上边的 {\\fn黑体\\fs20\\shad2\\2ah82\\3ah20\\4ah33\\fscx95\\3ch592001\\be1} |

#### `changeCard`

| 参数 | 说明 |
| --- | --- |
| `board` | 你的董事会 |
| `cardId` | 牌的代号要更改 |
| `object` | 传递要与卡片合并的对象 。 您可以添加新的道具和/或更改现有的道具 |

#### `onCardNew`

当用户通过默认的卡添加器模板添加出一副新卡后,这种回调将被称为通过更新的板和新卡.

#### `onNewCardConfirm`

当用户通过默认的卡添加器模板确认新卡后,这种回调将使用带有标题和用户打入的描述的卡片草稿来调用.

你个 **必须** 返回新卡,并用它的新编号在此回调中.

说明:

```js
function onCardNew (newCard) {
  const newCard = { id: ${required-new-unique-cardId}, ...newCard }
  return newCard
}

<Board initialBoard={board} allowAddCard onNewCardConfirm={onCardNew} onCardNew={console.log} />
```

#### `removeCard`

| 参数 | 说明 |
| --- | --- |
| `board` | 你的董事会 |
| `fromColumn` | 将牌放在哪里 |
| `card` | 要删除的牌 |

## {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}史蒂林 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

您既可以对所有棋盘进行样式调整,也可以导入我们的样式,并按您想要的样式覆盖:

| 类 |
| --- |
| `react-kanban-board` |
| `react-kanban-card` |
| `react-kanban-card-skeleton` |
| `react-kanban-card--dragging` |
| `react-kanban-card__description` |
| `react-kanban-card__title` |
| `react-kanban-column` |
| `react-kanban-card-adder-form` |
| `react-kanban-card-adder-button` |
| `react-kanban-card-adder-form__title` |
| `react-kanban-card-adder-form__description` |
| `react-kanban-card-adder-form__button` |
| `react-kanban-column-header` |
| `react-kanban-column-header__button` |
| `react-kanban-column-adder-button` |

## 测试

### 单位

```shell
yarn test
```

代码覆盖被保存在 `coverage` 文件夹。 例如,打开 HTML 报表

```shell
open coverage/lcov-report/index.html
```

### 端对端

使用 [齐压](https://www.cypress.io/) 试跑者。 启动 Dev 服务器并使用 Cypress 打开

```shell
yarn dev
```

所有测试都在 [细胞压/整合](https://npmcn.com/package/%40asseinfo/react-kanban/cypress/integration) 文件夹。 这些测试还收集了代码覆盖,并保存了多种格式的 `coverage` 文件夹。 打开 HTML 报表

```shell
open coverage/lcov-report/index.html
```

读取 [Cypress 代码覆盖指南](https://on.cypress.io/code-coverage)

注:避免插入 `babel-plugin-istanbul` 在测试时,E2E测试与 `NODE_ENV=cypress` 环境变量。 这个 `babel-plugin-istanbul` 插件包含在 [.babelrc 图像](https://npmcn.com/package/%40asseinfo/react-kanban/.babelrc) 只有文件在 `cypress` 节点环境, 留下默认的 Jest 配置 `NODE_ENV=test` 同样的.

## \* 路线图

您可以查看下一个功能 [这里](https://github.com/lourenci/react-kanban/milestone/1)。 。 。 . 欢迎你帮我们做公关.

## 捐款

欢迎公关:

-   叉开这个项目.
-   设置它:
    
    ```
    yarn
    yarn start
    ```
    
-   做你的零钱.
-   请将自己加入贡献者表格(我们使用 [所有贡献者](https://allcontributors.org/docs/en/cli/installation) 为此,我们首先需要安装:
    
    ```
    yarn contributors:add
    ```
    
-   打开公关.

### \* 捐款准则

-   你需要测试你的零钱.
-   试着清净你的零钱。 CodeClimate会盯着你的.
-   它必须传递给CI.

## 常见问题

### @asseinfo/react-kanban 是什么？

又一个Kanban/Trello board lib for React\. 康班/特雷罗董事会发布反弹\.

### 如何安装 @asseinfo/react-kanban？

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

### @asseinfo/react-kanban 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/asseinfo\_\_react-kanban 是否存在。

### @asseinfo/react-kanban 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @asseinfo/react-kanban 可以商用吗？

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

### @asseinfo/react-kanban 的下载量有多少？

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

### @asseinfo/react-kanban 还在维护吗？

最新版本 2\.2\.0 发布于 2021/09/23（5 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/06/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。