如何向树和treenode添加自定义图标

Question

我正在使用antd tree ui组件构建一个树，并希望将我自己的图标example something.png或jpg文件添加到每个treeNode。我怎么实现这个，请帮帮忙？

Answer 1

Tree接受名为switcherIcon的支柱，TreeNode接受名为icon的支柱。提到的道具可以是任何有效的ReactNode或Function(props):ReactNode。通常最好使用antd提供的默认Icon组件，但你也可以使用自己的<img/>。

使用antd Icon的示例：

<Tree
  showIcon
  defaultExpandAll
  defaultSelectedKeys={['0-0-0']}
  switcherIcon={<Icon type="down" />}
>
  <TreeNode icon={<Icon type="smile-o" />} title="parent 1" key="0-0">
    <TreeNode icon={<Icon type="meh-o" />} title="leaf" key="0-0-0" />
    <TreeNode icon={<Icon type="meh-o" />} title="leaf" key="0-0-1" />
  </TreeNode>
</Tree>

使用您自己的自定义图像：

首先定义您的组件：

const CustomIcon = () => (
  <img
    style={{ width: 15, padding: 1 }} // some custom style to look good
    src="https://image.flaticon.com/icons/svg/109/109688.svg" // use your imported .png or .jpg file instead
    alt="Custom Icon"
  />
);

然后以与上一个示例相同的方式使用它：

<Tree
  showIcon
  defaultExpandAll
  defaultSelectedKeys={['0-0-0']}
  switcherIcon={<CustomIcon />}
>
  <TreeNode icon={<CustomIcon />} title="parent 1" key="0-0">
    <TreeNode icon={<CustomIcon />} title="leaf" key="0-0-0" />
    <TreeNode icon={<CustomIcon />} title="leaf" key="0-0-1" />
  </TreeNode>
</Tree>

这是一个关于沙箱的演示：