Принципы работы компонентов

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

Компоненты делятся на контейнеры и элементы управления:

  • Контейнеры управляют расположением других компонентов и их структурой. Примеры: Layout, Row, Col, Card.
  • Элементы управления предназначены для интерактивности пользователя: Button, Input, Select, DatePicker.

JSX и свойства компонентов

Все компоненты AntD используют JSX-синтаксис для интеграции в React-приложение. Основной способ настройки компонента — через props, которые управляют его состоянием и визуальным поведением.

Пример кнопки с конфигурацией:

import { Button } from 'antd';

<Button type="primary" size="large" disabled>
  Отправить
</Button>

Здесь:

  • type="primary" задает визуальный стиль кнопки;
  • size="large" — размер;
  • disabled — делает кнопку неактивной.

События и обработчики

AntD активно использует события React. Любой компонент поддерживает стандартные события, например, onClick, onChange, onSelect.

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

import { Input } from 'antd';
import { useState } from 'react';

const [value, setValue] = useState('');

<Input
  placeholder="Введите текст"
  value={value}
  onCha nge={(e) => setValue(e.target.value)}
/>

События позволяют реализовать двустороннюю привязку данных и интеграцию с состоянием приложения.

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

Управляемый компонент (controlled) получает состояние через props и уведомляет об изменениях через события. Неуправляемый компонент (uncontrolled) управляет своим состоянием самостоятельно, предоставляя доступ к данным через методы или рефы.

Пример контролируемого Checkbox:

import { Checkbox } from 'antd';
import { useState } from 'react';

const [checked, setChecked] = useState(false);

<Checkbox checked={checked} onCha nge={(e) => setChecked(e.target.checked)}>
  Согласен с условиями
</Checkbox>

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

import { Input } from 'antd';
import { useRef } from 'react';

const inputRef = useRef(null);

<Input ref={inputRef} placeholder="Неуправляемый ввод" />

Стилизация и темы

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

  • theme variables (настройка глобальных цветов, размеров, отступов);
  • inline styles через проп style;
  • CSS классы через className.

Пример кастомизации цвета кнопки:

<Button type="primary" style={{ backgroundColor: '#52c41a', borderColor: '#52c41a' }}>
  Подтвердить
</Button>

Для глобальной темы можно использовать объект ConfigProvider:

import { ConfigProvider, Button } from 'antd';

<ConfigProvider theme={{ token: { colorPrimary: '#13c2c2' } }}>
  <Button type="primary">Тематическая кнопка</Button>
</ConfigProvider>

Композиция компонентов

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

Пример карточки с заголовком и кнопкой:

import { Card, Button } from 'antd';

<Card title="Профиль пользователя" extra={<Button>Редактировать</Button>}>
  <p>Имя: Иван</p>
  <p>Возраст: 28</p>
</Card>

Контролируемые формы

Компоненты для форм (Form, Input, Select, Checkbox) интегрированы с механизмом валидации. Основные принципы:

  • Form.Item связывает поле с состоянием формы;
  • rules задают валидацию;
  • метод onFinish обрабатывает успешную отправку формы.

Пример формы с валидацией:

import { Form, Input, Button } from 'antd';

<Form
  onFin ish={(values) => console.log(values)}
>
  <Form.Item
    name="username"
    rules={[{ required: true, message: 'Введите имя пользователя' }]}
  >
    <Input placeholder="Имя пользователя" />
  </Form.Item>
  <Form.Item>
    <Button type="primary" htmlType="submit">Отправить</Button>
  </Form.Item>
</Form>

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

Для динамических интерфейсов часто используются React-хуки: useState, useEffect, useRef. AntD-компоненты полностью совместимы с хуками, что позволяет легко реализовывать интерактивные и реактивные интерфейсы.

Пример динамического списка Select:

import { Sel ect } from 'antd';
import { useState, useEffect } fr om 'react';

const [options, setOptions] = useState([]);

useEffect(() => {
  fetch('/api/options')
    .then(res => res.json())
    .then(data => setOptions(data));
}, []);

<Select options={options.map(o => ({ label: o.name, value: o.id }))} />

Итоговые принципы работы компонентов

  • Инкапсуляция: каждый компонент скрывает внутреннюю логику.
  • Конфигурируемость через props: внешний код управляет поведением и отображением.
  • События для взаимодействия: стандартные и кастомные события позволяют интегрировать компоненты в приложение.
  • Поддержка управляемых и неуправляемых сценариев: гибкость в использовании состояния.
  • Стилизация через темы и inline-стили: адаптация внешнего вида без изменения внутренней логики.
  • Композиция и повторное использование: построение сложных интерфейсов из простых компонентов.

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

Оглавление