antd Tree组件点击节点文字实现展开收起

可以通过在Tree组件中设置onSelect函数来实现点击节点文字展开收起。

具体实现步骤如下：

1. 在Tree组件中设置onSelect函数，该函数会在节点被选中时触发。

<Tree
  onSelect={onSelect}
  // 其他属性
>
  // 树节点
</Tree>

2. 在onSelect函数中判断被选中的节点是否有子节点，如果有则展开节点，否则不做任何操作。

const onSelect = (selectedKeys, { node }) => {
  const { children } = node.props;
  if (children) {
    setExpandedKeys(expandedKeys => {
      const index = expandedKeys.indexOf(selectedKeys[0]);
      if (index > -1) {
        // 如果节点已展开，则收起节点
        return [...expandedKeys.slice(0, index), ...expandedKeys.slice(index + 1)];
      } else {
        // 如果节点未展开，则展开节点
        return [...expandedKeys, selectedKeys[0]];
      }
    });
  }
}

3. 在Tree组件中设置expandedKeys属性，该属性为展开的节点的key的数组。

<Tree
  onSelect={onSelect}
  expandedKeys={expandedKeys}
  // 其他属性
>
  // 树节点
</Tree>

完整代码如下：

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

const Demo = () => {
  const [expandedKeys, setExpandedKeys] = useState([]);

  const onSelect = (selectedKeys, { node }) => {
    const { children } = node.props;
    if (children) {
      setExpandedKeys(expandedKeys => {
        const index = expandedKeys.indexOf(selectedKeys[0]);
        if (index > -1) {
          // 如果节点已展开，则收起节点
          return [...expandedKeys.slice(0, index), ...expandedKeys.slice(index + 1)];
        } else {
          // 如果节点未展开，则展开节点
          return [...expandedKeys, selectedKeys[0]];
        }
      });
    }
  }

  return (
    <Tree
      onSelect={onSelect}
      expandedKeys={expandedKeys}
    >
      // 树节点
    </Tree>
  );
}

export default Demo;