antd的TreeSelect如何设置子节点不能作为选择项

Question

官网介绍里, TreeSelect的子组件TreeNode的属性selectable是这个作用的, 但是设置了却无效.

disabled虽然可以禁掉节点前的checkbox, 但是我想的是压根不想前面出现一个checkbox.

我的代码就是官网的最简单的demo的代码:

 const treeData = [{
            title: 'Node1',
            value: '0-0',
            key: '0-0',
            children: [{
              title: 'Child Node1',
              value: '0-0-0',
              key: '0-0-0',
            }],
          }, {
            title: 'Node2',
            value: '0-1',
            key: '0-1',
            children: [{
              title: 'Child Node3',
              value: '0-1-0',
              key: '0-1-0',
            },
            {
                title: 'Child Node3',
                value: '0-1-10',
                key: '0-1-10',
                disabled: true,
                isLeaf: true
              }
            , {
              selectable:false,
              title: 'Child Node4',
              value: '0-1-1',
              key: '0-1-1',
            }, {
              title: 'Child Node5',
              value: '0-1-2',
              key: '0-1-2',
              selectable:false,
            }],
          }];
          
          
      const tProps = {
        treeData,
        value: this.state.value,
        onChange: this.onChange,
        treeCheckable: true,
        showCheckedStrategy: SHOW_PARENT,
        searchPlaceholder: 'Please select',
        style: {
          width: 300,
        },
      };
          
          
 
     <TreeSelect {...tProps} >  </TreeSelect>

Answer 1

我试过是可以的，你的 antd 版本中的 TreeNode 是实现了这个属性的吗？如果有的话，再试试注释掉其他代码，只剩下最简单的显示代码看看。

const Tree = antd.Tree;
const { TreeNode } = Tree;
const treeData = [{
            title: 'Node1',
            value: '0-0',
            key: '0-0',
            children: [{
              title: 'Child Node1',
              value: '0-0-0',
              key: '0-0-0',
            }],
          }, {
            title: 'Node2',
            value: '0-1',
            key: '0-1',
            children: [{
              title: 'Child Node3',
              value: '0-1-0',
              key: '0-1-0',
            },
            {
                title: 'Child Node3',
                value: '0-1-10',
                key: '0-1-10',
                disabled: true,
                isLeaf: true
              }
            , {
              selectable:false,
              title: 'Child Node4',
              value: '0-1-1',
              key: '0-1-1',
            }, {
              title: 'Child Node5',
              value: '0-1-2',
              key: '0-1-2',
              selectable:false,
            }],
          }];

ReactDOM.render((<Tree
    showIcon
    defaultExpandAll
  >
    {treeData.map(node => {
      const {children, ...p} = node;
      return (
      <TreeNode {...p}>
        {children && children.length > 0 && children.map(n => (<TreeNode {...n}/>))}
      </TreeNode>
    )})}
    </Tree>), document.getElementById('root'))

Answer 2

selectable失效的原因是因为你没有用受控的Tree组件。selectable要设置为selectable={false}并且onCheck要设置一个空的方法（）=>{} 这样他才生效的