Root, Item

Radix UI предоставляет набор низкоуровневых компонентов для создания интерфейсов на React, сохраняя при этом полную управляемость и совместимость с современными библиотеками стилей. Два базовых компонента, часто встречающиеся в структуре Radix UI — это Root и Item. Они формируют основу для построения интерактивных компонентов, таких как меню, вкладки, аккордеоны и радио-группы.

Root

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

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

  1. defaultValue Используется для установки начального значения компонента. Например, в радиокнопках или вкладках это будет выбранная опция по умолчанию.

  2. value Позволяет полностью контролировать состояние извне. Используется вместе с onValueChange для реализации управляемых компонентов.

  3. onValueChange Коллбэк, который вызывается при изменении значения. Часто применяется для синхронизации состояния Root с внешними компонентами или хранилищем состояния, например, Redux или Zustand.

  4. defaultOpen / open / onOpenChange Свойства, характерные для компонентов с раскрывающимися списками или диалогами. defaultOpen задаёт начальное состояние, open позволяет управлять состоянием извне, а onOpenChange уведомляет о изменениях.

Пример использования Root

import * as Tabs from '@radix-ui/react-tabs';

function Example() {
  return (
    <Tabs.Root defaultValue="tab1">
      <Tabs.List>
        <Tabs.Trigger value="tab1">Вкладка 1</Tabs.Trigger>
        <Tabs.Trigger value="tab2">Вкладка 2</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="tab1">Содержимое вкладки 1</Tabs.Content>
      <Tabs.Content value="tab2">Содержимое вкладки 2</Tabs.Content>
    </Tabs.Root>
  );
}

В этом примере Root управляет состоянием активной вкладки и передаёт его дочерним компонентам Trigger и Content.

Item

Item — это элемент внутри контейнера Root. Он представляет отдельную интерактивную сущность: элемент меню, вкладку, радио-кнопку или пункт списка. Item часто работает вместе с Root для управления выбранным состоянием или обработкой пользовательских действий.

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

  1. value Уникальный идентификатор элемента. Используется Root для определения, какой Item активен.

  2. disabled Делает элемент неактивным и блокирует взаимодействие с ним.

  3. onSelect / onClick Коллбэк для обработки выбора элемента. Особенно полезен в меню или списках выбора, когда необходимо выполнить действие при клике.

  4. aria-* атрибуты Radix UI заботится о доступности, поэтому Item автоматически получает правильные ARIA-атрибуты, если он используется внутри соответствующего Root-контейнера.

Пример использования Item

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

function MenuExample() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>Открыть меню</DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item onSel ect={() => console.log('Первый элемент')}>
          Первый элемент
        </DropdownMenu.Item>
        <DropdownMenu.Item onSel ect={() => console.log('Второй элемент')}>
          Второй элемент
        </DropdownMenu.Item>
        <DropdownMenu.Item disabled>Неактивный элемент</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

В этом примере каждый Item внутри DropdownMenu.Content является отдельной интерактивной сущностью, а Root управляет открытием меню.

Связь Root и Item

  • Root управляет состоянием и обеспечивает контекст для дочерних элементов.
  • Item использует контекст Root для взаимодействия и уведомления о действиях пользователя.
  • Совместное использование этих компонентов позволяет создавать полностью управляемые и доступные интерфейсы с минимальной логикой вручную.

Ключевые моменты взаимодействия

  1. Контролируемые и неконтролируемые состояния Root поддерживает оба режима, что делает компоненты гибкими для различных архитектур.

  2. Доступность ARIA-атрибуты и управление фокусом встроены, поэтому разработчику не нужно вручную заботиться о доступности.

  3. Компоновка элементов Item может быть вложенным, иметь подменю или быть частью группы, при этом Root продолжает управлять общим состоянием.

Рекомендации по использованию

  • Использовать Root как единую точку управления состоянием для всех дочерних Item.
  • Каждый Item должен иметь уникальное value для корректной работы с Root.
  • Для динамически изменяемых списков следует использовать onValueChange или onSelect, чтобы синхронизировать состояние с внешними данными.
  • Для сложных интерфейсов можно комбинировать несколько Root-Item структур, например, вложенные меню или аккордеоны с подэлементами.

Эти базовые принципы обеспечивают стабильную работу компонентов Radix UI, позволяя создавать сложные, управляемые и доступные интерфейсы без дублирования логики состояния и обработки событий.

Оглавление