Компонент TreeSelect в WordPress используется для создания вложенного выпадающего меню, где пользователь может выбрать элемент из иерархии. Этот компонент особенно полезен для интерфейсов с древовидной структурой данных, например, для выбора родительской страницы в иерархии страниц.
В этой статье мы рассмотрим, как использовать TreeSelect, разберём все его свойства и приведём примеры кода для наглядного понимания.
Использование TreeSelect
Для начала импортируем компонент и создадим состояние для хранения выбранного элемента. В следующем примере мы создаём интерфейс для выбора родительской страницы из списка вложенных страниц.
Пример создания TreeSelect
import { useState } from 'react';
import { TreeSelect } from '@wordpress/components';
const PageSelector = () => {
const [selectedPage, setSelectedPage] = useState('p21');
return (
<TreeSelect
label="Выберите родительскую страницу"
noOptionLabel="Нет родительской страницы"
onChange={(newPage) => setSelectedPage(newPage)}
selectedId={selectedPage}
tree={[
{
name: 'Главная страница',
id: 'p1',
children: [
{ name: 'Подстраница 1', id: 'p11' },
{ name: 'Подстраница 2', id: 'p12' },
],
},
{
name: 'Страница 2',
id: 'p2',
children: [
{
name: 'Подстраница 1.1',
id: 'p21',
children: [
{ name: 'Подстраница 1.1.1', id: 'p211' },
],
},
],
},
]}
__nextHasNoMarginBottom={true}
/>
);
};
В данном примере мы создаём выпадающее меню для выбора из иерархии страниц, где каждая страница может иметь свои дочерние страницы. Используя состояние selectedPage, мы можем сохранять выбранный элемент и обновлять его при каждом изменении.
Свойства компонента TreeSelect
TreeSelect поддерживает ряд свойств, которые позволяют настраивать его отображение и поведение. Рассмотрим каждое из них подробно.
1. label
- Тип:
string - Описание: Текст метки, который будет отображаться над компонентом выбора. Эта метка помогает пользователю понять назначение выпадающего меню.
- Обязательное: Нет
Пример использования
<TreeSelect
label="Выберите категорию"
tree={/* структура дерева */}
/>
2. noOptionLabel
- Тип:
string - Описание: Этот текст будет отображаться как опция в выпадающем списке, когда ни один элемент не выбран. Подходит для случаев, когда важно указать «отсутствие выбора».
- Обязательное: Нет
<TreeSelect
noOptionLabel="Не выбрано"
tree={/* структура дерева */}
/>
3. onChange
- Тип:
function - Описание: Функция, которая вызывается при выборе нового элемента. В качестве аргумента получает
idвыбранного элемента. - Обязательное: Да
<TreeSelect
onChange={(newId) => console.log('Выбранный ID:', newId)}
tree={/* структура дерева */}
/>
4. selectedId
- Тип:
string | string[] - Описание:
IDтекущего выбранного элемента (или массивID, если возможно множественное выделение). - Обязательное: Нет
<TreeSelect
selectedId="p1"
tree={/* структура дерева */}
/>
5. tree
- Тип:
Object[] - Описание: Массив объектов, описывающий иерархию элементов в компоненте. Каждый объект в массиве представляет узел, который может содержать дочерние узлы в свойстве
children. - Обязательное: Нет
Структура дерева
Каждый элемент дерева имеет следующую структуру:
name(строка) — название элемента, отображаемое пользователю.id(строка) — уникальный идентификатор элемента.children(массив объектов) — дочерние элементы, которые могут иметь те же свойства.
Пример структуры дерева
const pagesTree = [
{
name: 'Главная страница',
id: 'main-page',
children: [
{ name: 'О нас', id: 'about' },
{ name: 'Контакты', id: 'contact' },
],
},
{
name: 'Блог',
id: 'blog',
children: [
{ name: 'Статья 1', id: 'post-1' },
{ name: 'Статья 2', id: 'post-2' },
],
},
];
6. __nextHasNoMarginBottom
- Тип:
boolean - Описание: Включает новые стили без отступа внизу компонента. Это свойство предназначено для перехода к стилям будущих версий WordPress.
- Обязательное: Нет
- По умолчанию:
false
<TreeSelect
__nextHasNoMarginBottom={true}
tree={/* структура дерева */}
/>
Полный пример TreeSelect
В следующем примере мы используем все доступные свойства для создания более сложного интерфейса выбора родительской страницы. Это пример интерфейса, где родительская страница выбирается из иерархии, состоящей из нескольких уровней вложенности:
import { useState } from 'react';
import { TreeSelect } from '@wordpress/components';
const CategorySelector = () => {
const [selectedCategory, setSelectedCategory] = useState('cat12');
return (
<TreeSelect
label="Выберите категорию"
noOptionLabel="Без категории"
onChange={(newCategory) => setSelectedCategory(newCategory)}
selectedId={selectedCategory}
tree={[
{
name: 'Категория 1',
id: 'cat1',
children: [
{ name: 'Подкатегория 1.1', id: 'cat11' },
{ name: 'Подкатегория 1.2', id: 'cat12' },
],
},
{
name: 'Категория 2',
id: 'cat2',
children: [
{
name: 'Подкатегория 2.1',
id: 'cat21',
children: [
{ name: 'Подкатегория 2.1.1', id: 'cat211' },
],
},
],
},
]}
__nextHasNoMarginBottom={true}
/>
);
};
В этом примере мы:
- Установили метку компонента с помощью
label. - Добавили специальную опцию для отсутствия выбора (
noOptionLabel). - Использовали дерево категорий с вложенными подкатегориями для выбора (
tree). - Включили новый стиль без отступа снизу (
__nextHasNoMarginBottom).
Заключение
Компонент TreeSelect в WordPress — это удобный инструмент для создания выпадающих списков с древовидной структурой. Он позволяет пользователям легко выбирать элементы из иерархии, будь то страницы, категории или другие вложенные структуры данных.