react中TreeSelect禁止选择父级

在React中的TreeSelect组件（通常是指Ant Design库中的`<TreeSelect>`），如果你想要禁止单个节点（父级）的选择，而不是整个树的选择，你可以通过处理数据和组件状态来实现这个功能。

首先，你需要确保你的数据结构包含一个字段来标记某个节点是否允许被选中。比如，可以添加一个`disabled`属性：

{
  id: '1',
  name: '父节点',
  children: [
    { id: '2', name: '子节点1', disabled: false },
    { id: '3', name: '子节点2', disabled: true } // 禁止选择的子节点
  ]
}

然后，在`TreeSelect`组件内部，当用户尝试点击父节点时，检查该节点的`disabled`属性，如果为`true`，则阻止默认的行为：

import React from 'react';
import { TreeSelect } from 'antd';

const TreeNode = ({ value, title, key, isDisabled, ...rest }) => (
  <TreeSelectTreeNode {...rest} isDisabled={isDisabled}>
    {title}
  </TreeSelectTreeNode>
);

const TreeSelectTreeNode = (props) => {
  const handleClick = (e) => {
    if (!props.isDisabled) {
      props.onSelect(e, props.value);
    }
  };

  return (
    <TreeSelectTreeNodeOption
      nodeTitle={props.title}
      selectable={!props.isDisabled}
      onClick={handleClick}
    />
  );
};

// ...

<TreeSelect
  options={yourDataArray}
  placeholder="请选择"
  onSelect={(selectedValue, selectedLabel) => handleNodeSelection(selectedValue)}
/>

在这个例子中，`handleNodeSelection`函数将处理节点的选择逻辑，并可以进一步阻止选择父节点。当你需要显示一个不可选择的父节点时，传递`{ isDisabled: true }`给它的子项。