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

Question

我正在使用antd tree ui组件构建一棵树，并想向每个treeNode添加我自己的图标示例something.png或jpg文件。我怎么实现这一目标，请帮忙？

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>

这是沙盒上的演示：