React+Ant Design Tree组件：如何仅选中父节点而不选中子节点？

要实现「选中父节点时不自动选中子节点、子节点选中状态独立」的效果，核心是利用Ant Design Tree组件的checkStrictly属性：

• 将checkStrictly设置为true，即可取消父子节点之间的选中联动逻辑，父节点选中不会触发子节点勾选，子节点选中也不会影响父节点的状态。

完整代码示例 #

import React, { useState } from 'react';
import { Tree } from 'antd';

const { TreeNode } = Tree;

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

  const handleCheck = (keys) => {
    setCheckedKeys(keys);
  };

  return (
    <Tree
      checkable
      checkStrictly={true} // 关键配置：关闭父子选中联动
      checkedKeys={checkedKeys}
      onCheck={handleCheck}
    >
      <TreeNode title="父节点A" key="a">
        <TreeNode title="子节点A1" key="a1" />
        <TreeNode title="子节点A2" key="a2" />
      </TreeNode>
      <TreeNode title="父节点B" key="b">
        <TreeNode title="子节点B1" key="b1" />
        <TreeNode title="子节点B2" key="b2" />
      </TreeNode>
    </Tree>
  );
};

export default CustomTree;

额外说明 #

如果需要更复杂的联动逻辑（比如子节点全选时自动选中父节点，但父节点选中不波及子节点），可以在onCheck事件中手动处理checkedKeys，根据子节点的选中状态判断是否更新父节点的选中状态，但基础需求下checkStrictly即可满足要求。

内容的提问来源于stack exchange，提问作者Đỗ Duy Đoàn