Tree

Компонент Tree предназначен для отображения иерархических данных в виде дерева. Он поддерживает многоуровневую вложенность, выбор элементов, динамическую загрузку данных и интерактивное управление узлами.

Основные свойства

  • treeData – массив объектов, описывающих узлы дерева. Каждый объект может содержать следующие поля:

    • title – текст, отображаемый для узла.
    • key – уникальный идентификатор узла.
    • children – массив дочерних узлов (аналогичная структура).
    • isLeaf – булево значение, указывающее, что узел является листом.

  • defaultExpandedKeys – массив ключей узлов, которые будут раскрыты при первоначальной загрузке.

  • defaultSelectedKeys – массив ключей узлов, выбранных по умолчанию.

  • defaultCheckedKeys – массив ключей узлов, отмеченных чекбоксом.

  • checkable – включение чекбоксов для выбора нескольких узлов.

  • multiple – разрешение множественного выделения.

  • onSelect – обработчик выбора узла: получает массив выбранных ключей и информацию о событии.

  • onCheck – обработчик изменения состояния чекбокса: возвращает массив ключей выбранных узлов.

  • loadData – функция для асинхронной подгрузки дочерних узлов. Возвращает Promise и позволяет реализовать динамическую загрузку.

Пример базового дерева

import React from 'react';
import { Tree } from 'antd';

const treeData = [
  {
    title: 'Главный узел',
    key: '0',
    children: [
      { title: 'Узел 1', key: '0-0', isLeaf: true },
      { title: 'Узел 2', key: '0-1', children: [
        { title: 'Узел 2-1', key: '0-1-0', isLeaf: true }
      ] }
    ]
  }
];

const MyTree = () => (
  <Tree
    treeData={treeData}
    defaultExpandedKeys={['0']}
    defaultSelectedKeys={['0-0']}
    checkable
  />
);

export default MyTree;

Асинхронная загрузка данных

Для больших деревьев полезно подгружать дочерние узлы по требованию. Используется свойство loadData.

const MyAsyncTree = () => {
  const onLoadD ata = ({ key, children }) => {
    if (children) {
      return Promise.resolve();
    }
    return fetch(`https://example.com/api/nodes?parent=${key}`)
      .then(response => response.json())
      .then(data => {
        // добавление дочерних узлов к родителю
      });
  };

  return <Tree loadData={onLoadData} />;
};

Работа с чекбоксами

Tree поддерживает выделение узлов через чекбоксы.

  • checkable – включает отображение чекбоксов.
  • checkedKeys – массив ключей отмеченных узлов (управляемый компонент).
  • onCheck – событие изменения состояния чекбоксов.

Пример:

const onCh eck = (checkedKeys) => {
  console.log('Выбранные узлы:', checkedKeys);
};

<Tree
  checkable
  onCh eck={onCheck}
  treeData={treeData}
/>

Управление раскрытием узлов

  • expandedKeys – массив ключей раскрытых узлов.
  • onExpand – обработчик изменения раскрытия узлов.

Пример управления раскрытием:

const [expandedKeys, setExpandedKeys] = React.useState(['0']);

<Tree
  expandedKeys={expandedKeys}
  onExp and={setExpandedKeys}
  treeData={treeData}
/>

Настройка отображения узлов

  • switcherIcon – позволяет изменить иконку раскрытия узла.
  • showLine – отображение линий между узлами (булево значение).
  • showIcon – отображение иконок перед узлами.
<Tree
  showLine
  showIcon
  switcherIcon={<CustomIcon />}
  treeData={treeData}
/>

Динамическая модификация дерева

Компонент Tree позволяет динамически добавлять, удалять или изменять узлы через изменение treeData в состоянии родительского компонента.

const [treeDataState, setTreeDataState] = React.useState(treeData);

const addNode = () => {
  const newTree = [...treeDataState];
  newTree[0].children.push({ title: 'Новый узел', key: '0-2', isLeaf: true });
  setTreeDataState(newTree);
};

Особенности производительности

  • Для больших деревьев рекомендуется использовать виртуализацию через rc-tree или дополнительные компоненты для ленивой загрузки узлов.
  • Ограничение количества одновременно рендерящихся узлов снижает нагрузку на DOM.

Вывод

Компонент Tree в Ant Design предоставляет гибкие средства для отображения и управления иерархическими данными: поддерживает чекбоксы, асинхронную загрузку, кастомизацию и динамическое обновление структуры. Правильная настройка ключевых свойств позволяет строить как простые деревья, так и сложные интерактивные интерфейсы.

Оглавление