AntD V5 Tree自定义勾选逻辑：父子节点勾选独立设置需求

要实现你需要的三个勾选行为，核心是用受控模式完全接管checkedKeys的维护，配合checkStrictly={true}关闭AntD默认的父子勾选关联，手动处理不同节点的勾选逻辑。

实现步骤 #

1. 维护受控状态checkedKeys，存储所有选中节点的key
2. 在onCheck事件中根据点击节点类型（父/子）编写自定义逻辑：
   • 点击父节点：勾选时同步选中所有子节点；取消时仅移除父节点，保留子节点的选中状态
   • 点击子节点：仅更新子节点的选中状态，不影响父节点

完整代码示例 #

import { useState } from 'react';
import { Tree, TreeProps } from 'antd';
import type { Key, CheckInfo } from 'antd/es/tree';

type TreeDataNode = TreeProps['treeData'][number];

const treeData = [
  {
    title: '父节点1',
    key: '0-0',
    children: [
      { title: '子节点1-1', key: '0-0-0' },
      { title: '子节点1-2', key: '0-0-1' },
    ],
  },
  {
    title: '父节点2',
    key: '0-1',
    children: [
      { title: '子节点2-1', key: '0-1-0' },
      { title: '子节点2-2', key: '0-1-1' },
    ],
  },
];

const CustomTree = () => {
  const [checkedKeys, setCheckedKeys] = useState<Key[]>([]);

  // 递归获取父节点下所有子节点的key
  const getAllChildKeys = (nodes: TreeDataNode[]): Key[] => {
    return nodes.flatMap(item => {
      if (item.children && item.children.length > 0) {
        return [item.key, ...getAllChildKeys(item.children)];
      }
      return [item.key];
    });
  };

  const handleCheck = (checkedKeysValue: Key[], info: CheckInfo) => {
    const { node } = info;
    // 处理父节点点击
    if (node.children && node.children.length > 0) {
      const childKeys = getAllChildKeys(node.children as TreeDataNode[]);
      const isParentChecked = checkedKeysValue.includes(node.key);
      
      if (isParentChecked) {
        // 勾选父节点：将父节点+所有子节点加入选中集合
        setCheckedKeys([...new Set([...checkedKeysValue, ...childKeys])]);
      } else {
        // 取消父节点：仅移除父节点，保留子节点中原本选中的项
        const remainingKeys = checkedKeysValue.filter(key => 
          key !== node.key
        );
        setCheckedKeys(remainingKeys);
      }
    } else {
      // 处理子节点点击：直接更新选中集合，不影响父节点
      setCheckedKeys(checkedKeysValue);
    }
  };

  return (
    <Tree
      checkable
      checkStrictly={true} // 关闭AntD默认父子关联逻辑
      checkedKeys={checkedKeys}
      onCheck={handleCheck}
      treeData={treeData}
    />
  );
};

export default CustomTree;

逻辑验证 #

• 需求1：点击父节点时，所有子节点会被同步勾选，符合要求
• 需求2：父节点勾选后，取消所有子节点，父节点仍保留勾选状态（父节点key始终在checkedKeys中）
• 需求3：初始无勾选时，手动勾选所有子节点，父节点不会被自动勾选（父节点key从未被加入checkedKeys）

内容的提问来源于stack exchange，提问作者Minh Quang Lệ