react中的关于 antd@5 之后 tree 树形控件横向排列问题

在 antd@5 之后，tree 树形控件默认是竖向排列，如果需要横向排列，可以通过设置 tree 的 `switcherIcon` 属性为 `false`，并自定义节点的样式来实现。

具体的实现步骤如下：

1. 在 tree 组件中设置 `switcherIcon={false}`，禁用默认的展开/收起图标。
2. 定义自定义节点的样式，并设置 `display: inline-block;`，让节点在同一行显示。
3. 使用 `treeData` 属性传递树形数据，并在节点中设置 `key`、`title`、`children` 等属性，实现树形结构的构建。

以下是一个示例代码：

import { Tree } from 'antd';

const treeData = [
  {
    key: '1',
    title: 'Parent',
    children: [
      {
        key: '1-1',
        title: 'Child 1',
      },
      {
        key: '1-2',
        title: 'Child 2',
      },
      {
        key: '1-3',
        title: 'Child 3',
      },
    ],
  },
];

const MyTree = () => {
  const treeNodes = (data) =>
    data.map((item) => (
      <Tree.TreeNode key={item.key} title={item.title}>
        {item.children && treeNodes(item.children)}
      </Tree.TreeNode>
    ));

  return (
    <Tree switcherIcon={false}>{treeNodes(treeData)}</Tree>
  );
};

需要注意的是，如果树形结构过于复杂，横向排列可能会导致节点重叠，影响用户体验，此时建议还是采用竖向排列。