Как добавить пользовательский значок в дерево и триод

Question

Я строю дерево, используя пользовательский интерфейс antd tree, и хочу добавить свой собственный файл с примером например что-то файл .png или jpg к каждому treeNode.Как получилось, пожалуйста, помогите?

Answer 1

Tree принять реквизит с именем switcherIcon и TreeNode принять реквизит с именем icon.Упомянутый реквизит может быть любым действительным ReactNode или Function(props):ReactNode.Обычно лучше использовать компонент Icon по умолчанию, предоставленный antd, но вы также можете указать свой собственный <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>

Вот демонстрация в песочнице: