antd tree 动态勾选

### 实现 Ant Design Tree 节点动态勾选 Ant Design 的 `Tree` 组件提供了丰富的 API 和事件处理机制，能够满足复杂的树形数据交互需求。为了实现父子节点之间的关联以及部分勾选功能，可以通过监听 `check` 事件并自定义逻辑来控制哪些节点应该被选中。 #### 使用 controlled 模式管理 checkedKeys 当使用 Controlled 模式的 `Tree` 组件时，开发者可以直接通过设置 `checkedKeys` 属性来决定当前已被选中的项。这种方式允许更灵活地处理多选行为，并且可以在每次状态变化后立即更新 UI 显示[^2]。 ```javascript import React, { useState } from 'react'; import { Tree } from 'antd'; const Demo = () => { const [checkedKeys, setCheckedKeys] = useState([]); const onCheck = (checkedKeyArray, e) => { let newCheckedKeys; if (!e.halfCheckedKeys.length && !e.checked) { // 当取消某个父节点的选择时，移除其所有后代节点 newCheckedKeys = removeDescendants(checkedKeyArray, e.node.eventKey); } else if (isAllChildrenSelected(e)) { // 如果某一层的所有子节点都被选中，则添加该层的父节点到 selected list 中 newCheckedKeys = addParentIfAllChildrenAreSelected([...checkedKeyArray, ...e.halfCheckedKeys], e); } else { // 否则保持原有选择不变 newCheckedKeys = [...checkedKeyArray]; } setCheckedKeys(newCheckedKeys); }; function isAllChildrenSelected(eventInfo){ const childrenCount = eventInfo.node.children?.length || 0; return childrenCount === eventInfo.checkedNodes.filter(item=>item.key !== eventInfo.node.eventKey).length; } function addParentIfAllChildrenAreSelected(keys, eventInfo){ if(isAllChildrenSelected(eventInfo)){ keys.push(eventInfo.node.parent.eventKey); } return Array.from(new Set(keys)); } function removeDescendants(currentKeys, parentEventKey){ return currentKeys.filter(key => !key.startsWith(parentEventKey + '-')); } return ( <Tree checkable defaultExpandAll={true} onCheck={onCheck} checkedKeys={checkedKeys} treeData={[ { title: 'parent 1', key: '0-0', children: [ { title: 'child 1-1', key: '0-0-0' }, { title: 'child 1-2', key: '0-0-1' } ] } ]} /> ); }; export default Demo; ``` 此代码片段展示了如何基于用户的交互调整已选中的键值集合 (`checkedKeys`) 。每当发生勾选动作时，都会触发 `onCheck` 函数，在这里可以根据业务规则判断是否要同步改变其他节点的状态。例如： - 取消一个父节点的选择时，应同时清除它所有的子孙节点； - 若某一层次下的所有子节点均被选中，则自动将其上级加入到选中列表里；反之亦然。 需要注意的是对于非常复杂或大型的数据集来说，这种手动维护父子关系的方法可能会变得难以管理和低效。因此建议在这种情况下考虑采用服务端分页加载等方式优化性能表现[^1]。