antd tree 最顶层节点 只能勾选一个 如何处理

在Ant Design（antd）的Tree组件中，如果想要限制最顶层节点只能选择一个，你可以通过监听Tree组件的`onCheck`事件并手动控制状态来实现。下面是一个简化的步骤：

1. 首先，在`state`中添加一个变量来存储已选中的顶级节点的key，例如`selectedTopLevelKey`。

const [selectedTopLevelKey, setSelectedTopLevelKey] = useState<string | null>(null);

2. 当用户点击某个顶级节点时，检查是否还有其他已选中的顶级节点，如果有，则取消前一个的选择，并设置当前点击的节点为已选中。

<TreeNode
  key={node.key}
  checkable
  onCheck={(checked) => {
    if (checked && selectedTopLevelKey !== node.key) {
      if (selectedTopLevelKey) {
        // 取消之前的选择
        this.setState({ selectedTopLevelKey: null });
      }
      setSelectedTopLevelKey(node.key);
    } else if (!checked && selectedTopLevelKey === node.key) {
      setSelectedTopLevelKey(null);
    }
  }}
/>

3. 如果树结构发生变化，比如新增或删除顶级节点，需要更新`selectedTopLevelKey`的状态，确保它始终指向有效的顶级节点。

4. 在渲染节点时，可以使用`disabled`属性来阻止未被选中的顶级节点被勾选。

<TreeNode
  key={node.key}
  checkable
  disabled={!selectedTopLevelKey || node.key === selectedTopLevelKey}
  onCheck={...} // 上述的onCheck函数
/>

5. 这样就实现了只允许一个顶级节点被选中的功能。如果需要在组件外部访问这个状态，记得提供一个获取`selectedTopLevelKey`的方法供其他部分使用。