antd1.7.8tree自定义treenode

antd 1.7.8 版本中，tree 组件可以通过自定义 TreeNode 来实现个性化的节点显示。

首先，我们需要导入 Tree 组件和 TreeNode 组件：

import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;

然后，我们可以在 Tree 组件中使用 TreeNode 组件来渲染自定义节点。例如，如果我们想要在节点中显示一个图标和文字，可以这样写：

<Tree>
  <TreeNode title={<span><Icon type="user" />Node 1</span>} key="1">
    <TreeNode title={<span><Icon type="user" />Leaf node 1-1</span>} key="1-1" />
    <TreeNode title={<span><Icon type="user" />Leaf node 1-2</span>} key="1-2" />
  </TreeNode>
</Tree>

上述代码中，通过在 title 属性中传入一个 span 元素，我们可以在其中定义一个显示图标和文字的 DOM 结构。

如果我们想要自定义节点的样式，可以通过 CSS 来实现。例如，如果我们需要给节点添加一个自定义的类名，可以这样写：

const MyTreeNode = ({ title, ...rest }) => (
  <TreeNode {...rest} className="my-tree-node">{title}</TreeNode>
);

在上述代码中，我们定义了一个名为 MyTreeNode 的组件，并在其中通过 className 属性为节点添加了一个名为 my-tree-node 的类。

通过自定义 TreeNode，我们可以实现各种个性化的节点显示，满足不同的需求。以上是在 antd 1.7.8 版本中自定义 TreeNode 的简单示例。