# @caldwell619/react-kanban 中文文档
规范地址：https://npmcn.com/package/%40caldwell619/react-kanban/
版本：0\.0\.12
npm 元数据更新时间：2025-02-03T16:50:48.553Z
中文译文更新时间：2026-11-08T23:50:50.780Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40caldwell619/react-kanban
原文对照：https://npmcn.com/package/%40caldwell619/react-kanban/?lang=original
项目主页：https://christopher-caldwell.github.io/react-kanban
源码仓库：https://github.com/christopher-caldwell/react-kanban
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：68.1 kB，78 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：react \>=16，react-dom \>=16，@hello-pangea/dnd \>=16
- 首次发布：2022-10-02T23:07:38.069Z
- 最新版本发布：2025-02-03T16:50:48.366Z
- 近 30 天下载量：14996（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：12（近 12 个月 0 个）
## 中文简介
(fork of) 又一个 Kanban/Trello 棋盘回放
## 安装
```sh
npm install @caldwell619/react-kanban
```
也可以使用：`pnpm add @caldwell619/react-kanban`、`yarn add @caldwell619/react-kanban`、`bun add @caldwell619/react-kanban`
## README
# 卡尔德韦尔619 反相坎班
[](https://www.npmjs.com/package/@caldwell619/react-kanban) [](https://www.npmjs.com/package/@caldwell619/react-kanban)  
## asseinfo 的 Kanban 反应
从 [asseinfo 的 Kanban 反应](https://github.com/asseinfo/react-kanban)
向所有贡献者大声疾呼.
## 为什么是叉子?
- 原有的图书馆似乎不再维持. 此时最后一次承诺是2021年9月.
- 原始库不包括TypeScript类型. 这是在联署材料中写的,但没有提供任何类型。 此分叉由TypeScript本地写成.
## 路线图
[给](https://npmcn.com/package/%40caldwell619/react-kanban/docs/roadmap.md) 是队列中的内容。 如果你想看点什么, [提出一个问题](https://github.com/christopher-caldwell/react-kanban/issues/new)
## 演示
[链接](https://christopher-caldwell.github.io/react-kanban)
## 设置
```bash
yarn add @caldwell619/react-kanban
```
您还需要自行安装对等依赖 :
```json
"peerDependencies": {
"react": ">=16",
"react-dom": ">=16",
"@hello-pangea/dnd": ">=16"
},
```
这些都被列为对等依赖,因为如果你已经使用,我不想将特定版本标为依赖.
## 使用量
有两个主板, `Controlled` 财务报告和审定财务报表 `Uncontrolled`。 。 。 .
这是与原版的偏差,因为当时只有一个板子出口. 在原作中,对棋盘是否被控制有内部的确定. 事情不是这样的,因为你将会知道 你的董事会是否受到控制.
记住这一点,你可以 进口每块板像这样:
```tsx
import { UncontrolledBoard, KanbanBoard } from '@caldwell619/react-kanban'
// import { ControlledBoard } from '@caldwell619/react-kanban'
import '@caldwell619/react-kanban/dist/styles.css' // import here for "builtin" styles
const board: KanbanBoard = {
columns: [
{
id: 1,
title: 'Backlog',
cards: [
{
id: 1,
title: 'Add card',
description: 'Add capability to add a card in a column'
},
]
},
{ ... }
]
}
```
### 无控制
用一个无控制板,你通过一个 `initialBoard` 道克(prop),它将成为内部状态的基础. 当一个用户移动某个东西时,这些都由内部状态控制.
### 已控制
当你需要更好的控制板时,你应该坚持控制板. 控制板意味着你需要 处理板自己, 你需要保持状态 在你的手中(组件) 并将状态传递给 ``我们只是反映这个状态.
如果你跟受控者走,你需要通过你的板子 `children` 道具 (英语).
### 董事会
如果你真的想使用统一板,你还可以使用 `Board`。是否提供 `initialBoard` 或者说 `children` 将决定你用哪块板。 如果你提供两者, `UncontrolledBoard` 优先处理.
见一例, [这里](https://npmcn.com/package/%40caldwell619/react-kanban/demo/src/features/one-board/index.tsx)。 。 。 .
### 协助控制板工作
帮助者在使用时会接触到帮助您的董事会状态的管理 `ControlledBoard`。他们与内部使用的帮助者相同,因此您可以利用他们协助控制状态.
```tsx
import { ControlledBoard, moveCard, KanbanBoard, OnDragEndNotification, Card } from '@caldwell619/react-kanban'
const MyBoard = () => {
const [board, setBoard] = useState(initialBoard)
const handleCardMove: OnDragEndNotification = (_card, source, destination) => {
setBoard((currentBoard) => {
return moveCard(currentBoard, source, destination)
})
}
return {board}
}
```
[帮助者的完整列表](https://npmcn.com/package/%40caldwell619/react-kanban/docs/helpers.md)。 。 。 .
## 董事会类型
如果你使用JS,这个部分对你没有任何影响.
棋盘类型为 `KanbanBoard`。这是一个通用的,它接受 `TCard extends Card`您的数据无疑需要定制,所以所有帮助者和董事会将接受您的数据 `TCard`。 。 。 .
```tsx
import { Card } from '@caldwell619/react-kanban'
interface CustomCard extends Card {
storyPoints: number
}
export const renderCard: UncontrolledBoardProps['renderCard'] = (card) => {
// Can access with `card.storyPoints`
return
}
```
这种行为将贯穿整个渲染过程并证实方法.
```tsx
import { ControlledBoard, KanbanBoard } from '@caldwell619/react-kanban'
const CustomBoard = () => {
return (
renderCard={(card) => {
// `card.storyPoints`
return
}}
>
{board}
)
}
```
## 道具
详尽无遗 **妇女** 可以通过的道具列表,参考: [此页面](https://npmcn.com/package/%40caldwell619/react-kanban/props.md)。 。 。 .
## 样式
你要么把所有的棋盘都样式, 要么导入我们的样式, 用你想要的样式来覆盖它。 理想的情况是,您会制作专栏,而不是压倒性的CSS, 但是如果您需要的话,这可能会对您有所帮助.
| 类 |
| --- |
| `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` |
## 用回混号
大声呼喊 [@vjanssens (英语)](https://github.com/vjanssens) 用于发现与 Remix 兼容的附加步骤.
在您的 Vite 配置中添加以下内容 :
```ts
export default defineConfig({
// the rest of your config
ssr: {
noExternal: ["@caldwell619/react-kanban"]
},
});
```
## 捐款
欢迎公关.
### 步骤
- 文件 a [问题](https://github.com/christopher-caldwell/react-kanban/issues),使用问题模板.
- 叉开这个项目.
- 砍断你的叉子
- 在你的叉子上,运行 `yarn` 安装道具
- 开始工作
- 将自己添加到贡献者表格中, 这是由 [全部贡献者](https://allcontributors.org/)
- `yarn all-contributors add`
- `yarn all-contributors generate`
- 提交目标底部横跨叉的公关 `christopher-caldwell:master`。 。 。 .
## 常见问题
### @caldwell619/react-kanban 是什么？
\(fork of\) 又一个 Kanban/Trello 棋盘回放
### 如何安装 @caldwell619/react-kanban？
在项目目录运行 npm install @caldwell619/react-kanban，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16）、react-dom（\>=16）、@hello-pangea/dnd（\>=16）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @caldwell619/react-kanban 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/caldwell619\_\_react-kanban 是否存在。
### @caldwell619/react-kanban 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @caldwell619/react-kanban 可以商用吗？
@caldwell619/react-kanban 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @caldwell619/react-kanban 的下载量有多少？
根据 npm 官方下载统计，@caldwell619/react-kanban 在 2026/10/09 – 2026/11/07 这 30 天内被下载 14,996 次，日均约 500 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @caldwell619/react-kanban 还在维护吗？
最新版本 0\.0\.12 发布于 2025/02/04（1\.8 年前）；至今共发布 12 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/10/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。
