react-kanban 受控模式必备:8 个 Helper 函数让看板状态管理事半功倍【免费下载链接】react-kanbanYet another Kanban/Trello board lib for React.项目地址: https://gitcode.com/gh_mirrors/reac/react-kanbanreact-kanban 是一个开箱即用的 React 看板Kanban/Trello 风格组件库。当你希望完全掌控看板数据时受控模式是首选方案而官方内置的 8 个 Helper 函数能让你用最少的代码完成列与卡片的增、删、改、移让看板状态管理事半功倍。本文带你逐一吃透这 8 个函数并附上可直接上手的实战示例。react-kanban 受控模式与非受控模式的区别react-kanban 的看板组件提供两种使用方式入口判断逻辑在 Board/index.js 中一目了然模式传参方式状态由谁管理适合场景非受控模式initialBoard组件内部自动管理快速原型、简单演示受控模式children你自己用useState等管理深度定制、与业务状态联动简单说非受控模式把状态交给库受控模式把状态握在自己手里。受控模式下看板数据完全由你掌控任何改动都需要你主动更新状态这时就需要 Helper 函数来帮忙了。受控看板状态管理为什么需要 Helper 函数这 8 个函数全部定义在 helpers.js并通过 index.js 随组件一起导出。它们有三大优点纯函数、无副作用传入看板数据返回一份全新的看板绝不会修改原数据完美契合 React 不可变更新理念100% 单元测试覆盖测试用例写在 helpers.spec.js官方强烈推荐直接使用与组件内部同源非受控模式内部就是靠它们管理状态的行为绝对一致底层还借助了 utils.js 中的数组工具函数如addInArrayAtPosition、changeElementOfPositionInArray帮你把复杂的数组操作全部封装掉了。一、操作列的 4 个 Helper 函数1. moveColumn拖拽移动列拖拽列结束时调用根据起始位置和终点位置重排列顺序参数说明board当前看板{ fromPosition }列当前所在索引{ toPosition }列要移动到的索引const newBoard moveColumn(board, { fromPosition: 0 }, { toPosition: 2 }) setBoard(newBoard)2. addColumn一键新增列在末尾追加一个新列新列需包含id和cards字段const newColumn { id: 3, title: 已完成, cards: [] } setBoard(addColumn(board, newColumn))3. removeColumn快速删除列传入要删除的列对象即可得到移除该列后的新看板setBoard(removeColumn(board, column))4. changeColumn修改列信息用新对象与目标列做合并常用于重命名列或给列添加自定义字段setBoard(changeColumn(board, column, { title: 新的列名, wip: 5 }))二、操作卡片的 4 个 Helper 函数5. moveCard拖拽移动卡片这是最常用的函数它的source与destination参数和onCardDragEnd回调收到的完全一致可直接拿来用const handleCardDragEnd (card, source, destination) { setBoard((prev) moveCard(prev, source, destination)) }无论是同一列内排序还是跨列移动它都能正确处理。6. addCard新增看板卡片第三个参数{ on: top }控制插入位置默认插到底部const newCard { id: 99, title: 新任务, description: 描述 } setBoard(addCard(board, column, newCard)) // 默认底部 setBoard(addCard(board, column, newCard, { on: top })) // 插入顶部7. removeCard删除指定卡片传入所在列和卡片对象即可安全移除setBoard(removeCard(board, column, card))8. changeCard修改卡片信息通过cardId定位卡片再合并新属性适合更新标题、描述或自定义字段setBoard(changeCard(board, 99, { title: 更新后的标题, priority: high }))react-kanban 受控模式实战useState 管理看板状态下面是一个完整的受控看板最小示例覆盖拖拽移动卡片、添加卡片和删除卡片三个高频操作import { useState } from react import Board, { moveCard, addCard, removeCard } from asseinfo/react-kanban import asseinfo/react-kanban/dist/styles.css const initialBoard { columns: [ { id: 1, title: 待办, cards: [{ id: 1, title: 写 react-kanban 教程 }] }, { id: 2, title: 进行中, cards: [] }, { id: 3, title: 已完成, cards: [] }, ], } function App() { const [board, setBoard] useState(initialBoard) const handleCardDragEnd (card, source, destination) setBoard((prev) moveCard(prev, source, destination)) const handleAddCard (column, title) setBoard((prev) addCard(prev, column, { id: Date.now(), title })) const handleRemoveCard (column, card) setBoard((prev) removeCard(prev, column, card)) return ( Board onCardDragEnd{handleCardDragEnd} renderCard{({ title }, { dragging }) ( div {title} button onClick{() handleRemoveCard(column, card)}删除/button /div )} {board} /Board ) }核心思路只有一句话所有操作都先调用 Helper 函数拿到新看板再setBoard更新状态。看板状态管理的常见坑与注意事项⚠️id 必须唯一列和卡片的id是 Helper 函数定位元素的依据新增时记得用Date.now()或自增计数器生成⚠️函数不改原对象它们总是返回新看板千万别用返回值去覆盖引用后还期待原数据变化⚠️受控模式用children传数据同时传children和initialBoard会走非受控逻辑容易踩坑想调试源码可以git clone https://gitcode.com/gh_mirrors/reac/react-kanban后直接阅读 helpers.js 的实现掌握了这 8 个 Helper 函数react-kanban 受控模式下的看板状态管理就不再是难题。赶紧把moveColumn、addCard这些函数用起来让你的看板项目开发效率翻倍吧【免费下载链接】react-kanbanYet another Kanban/Trello board lib for React.项目地址: https://gitcode.com/gh_mirrors/reac/react-kanban创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考