Общие свойства компонентов

В библиотеке Ant Design (AntD) все компоненты строятся на единых принципах проектирования, что обеспечивает консистентный внешний вид и поведение. Основные свойства компонентов можно разделить на несколько категорий: управление состоянием, стилизация, события, доступность и композиция. Понимание этих свойств критично для эффективного использования библиотеки в больших проектах.

Управление состоянием

Большинство компонентов AntD поддерживает контролируемый и неконтролируемый режимы.

  • Контролируемый компонент управляется извне через пропсы, например value для ввода текста (Input) или selectedKeys для компонентов навигации (Menu). Изменение состояния происходит через callback-функции, например onChange.

    <Input value={text} onCha nge={(e) => setText(e.target.value)} />

  • Неконтролируемый компонент самостоятельно хранит внутреннее состояние и обновляет его без участия внешнего кода. Например, компоненты вроде Checkbox могут использовать defaultChecked.

Ключевой момент: выбор между контролируемым и неконтролируемым режимом зависит от необходимости синхронизации состояния с внешними данными или формой.

Стилизация и оформление

Компоненты AntD поддерживают гибкую настройку внешнего вида:

  • Проп className позволяет добавлять свои CSS-классы:

    <Button className="my-custom-button">Нажать</Button>

  • Проп style обеспечивает inline-стили:

    <Card style={{ width: 300, backgroundColor: '#f0f2f5' }} />

  • Тема и глобальные переменные. AntD использует Less-переменные для настройки цветов, размеров, теней и шрифтов. Изменение темы возможно через конфигурацию ConfigProvider:

    import { ConfigProvider } from 'antd';
<ConfigProvider theme={{ token: { colorPrimary: '#1DA57A' } }}>
  <Button>Тематическая кнопка</Button>
</ConfigProvider>

Важно: использование ConfigProvider позволяет изменять тему глобально без необходимости модификации отдельных компонентов.

События компонентов

Практически каждый компонент предоставляет набор событий, позволяющих реагировать на действия пользователя:

  • onClick – универсальное событие клика для кнопок, карточек, элементов меню.
  • onChange – изменение значения (например, Input, Select, DatePicker).
  • onFocus / onBlur – фокусировка и потеря фокуса.
  • onSelect / onDeselect – выбор или снятие выбора в списках и селектах.

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

<Select onCha nge={(value) => console.log(value)} />

Совет: при работе с формами AntD рекомендуется использовать компоненты Form.Item совместно с контролируемыми элементами, чтобы события обрабатывались централизованно.

Доступность (Accessibility)

AntD придерживается стандартов WCAG и ARIA, что делает компоненты доступными для пользователей с особыми потребностями.

  • Все интерактивные элементы имеют атрибуты role, aria-label, aria-checked там, где это необходимо.
  • Возможность работы с клавиатурой: большинство компонентов поддерживает навигацию с помощью Tab и Enter.
  • Компоненты вроде Tooltip и Modal корректно взаимодействуют с экранными читалками.

Пример:

<Switch aria-label="Включить уведомления" defaultChecked />

Композиция и вложенность компонентов

AntD предоставляет возможность гибкой композиции компонентов для построения сложных интерфейсов:

  • Контейнеры: Card, Layout, Space, Row/Col позволяют организовать расположение дочерних элементов.
  • Комбинация интерактивных элементов: Menu может содержать SubMenu и Menu.Item, а Form.Item — любые поля ввода.
  • Слоты и проп children: большинство компонентов поддерживают вложенные элементы через children, обеспечивая кастомизацию содержимого.

Пример:

<Card title="Профиль">
  <p>Имя: Иван</p>
  <Button type="primary">Редактировать</Button>
</Card>

Общие системные пропсы

Практически у всех компонентов AntD есть ряд системных пропсов, которые повторяются:

  • id – уникальный идентификатор компонента.
  • className – CSS-классы.
  • style – inline-стили.
  • disabled – блокировка взаимодействия.
  • loading – для кнопок и некоторых интерактивных элементов, отображает индикатор загрузки.
  • key – идентификатор при рендере списков и массивов компонентов.

Эти свойства позволяют управлять поведением и внешним видом компонентов в любой части приложения.

Итоговая схема

Категория Основные свойства Пример использования
Управление состоянием value, defaultValue, onChange <Input value={text} onCha nge={...} />
Стилизация className, style, theme <Button className="btn" style={{...}} />
События onClick, onChange, onFocus, onBlur <Select onCha nge={...} />
Доступность aria-label, role, tabIndex <Switch aria-label="..." />
Композиция children, контейнеры, слоты <Card><Button /></Card>
Общие системные пропсы id, disabled, loading, key <Button id="btn1" loading />

Эти общие свойства формируют основу для работы со всеми компонентами Ant Design, обеспечивая единообразие и предсказуемое поведение интерфейса.

Оглавление