Создание обёрток над компонентами

Обёртка над компонентом (wrapper) — это компонент более высокого уровня, который инкапсулирует логику, стили и конфигурацию одного или нескольких компонентов Ant Design, предоставляя единый интерфейс для их использования. Такой подход позволяет снижать повторяемость кода, упрощать поддержку и интегрировать кастомные функциональности без изменения исходных компонентов библиотеки.

Типы обёрток

  1. Простые визуальные обёртки Используются для добавления дополнительных стилей, классов или обёртывания в контейнер с предопределённой структурой. Пример: компонент CardWrapper, который оборачивает Card и задаёт единый padding и тень.

    import { Card } from 'antd';
import './CardWrapper.css';

const CardWrapper = ({ children, title }) => (
  <Card className="custom-card" title={title}>
    {children}
  </Card>
);

export default CardWrapper;

    Важный момент: визуальные обёртки не должны изменять внутреннюю логику компонента, только его внешний вид и структуру.

  2. Функциональные обёртки Предназначены для внедрения дополнительной логики: обработка событий, управление состоянием, интеграция с API или валидация данных. Например, обёртка для Input с автоматической проверкой введённых данных:

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

const ValidatedInput = ({ rules, ...props }) => {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <Form.Item rules={rules}>
      <Input {...props} value={value} onCha nge={handleChange} />
    </Form.Item>
  );
};

export default ValidatedInput;

    Здесь ValidatedInput объединяет стандартный Input и Form.Item, обеспечивая валидацию и контроль состояния внутри обёртки.

  3. Композиционные обёртки Объединяют несколько компонентов в один единый модуль с готовым интерфейсом. Часто используются для создания сложных форм, таблиц или виджетов.

    import { Button, Dropdown, Menu } from 'antd';

const ActionDropdown = ({ actions }) => {
  const menu = (
    <Menu>
      {actions.map((action) => (
        <Menu.Item key={action.label} onCl ick={action.onClick}>
          {action.label}
        </Menu.Item>
      ))}
    </Menu>
  );

  return (
    <Dropdown overlay={menu} placement="bottomRight">
      <Button>Действия</Button>
    </Dropdown>
  );
};

export default ActionDropdown;

    В данном случае ActionDropdown создаёт обёртку над Dropdown и Button, предоставляя удобный API для передачи действий.

Рекомендации по проектированию обёрток

  • Минимизация интерфейса: обёртка должна скрывать детали реализации, оставляя только необходимые пропсы.
  • Повторное использование: проектировать так, чтобы один компонент-обёртка мог использоваться в нескольких местах без модификаций.
  • Инкапсуляция логики: внутренняя логика компонента не должна “протекать” наружу. Для передачи событий использовать callback-пропсы.
  • Соблюдение стилей Ant Design: сохранять визуальный язык библиотеки, не ломать сетку и отступы компонентов.

Практика с HOC (Higher-Order Components)

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

import React from 'react';

const withLoading = (WrappedComponent) => {
  return ({ isLoading, ...props }) => {
    if (isLoading) return <div>Загрузка...</div>;
    return <WrappedComponent {...props} />;
  };
};

export default withLoading;

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

import { Table } from 'antd';
import withLoading from './withLoading';

const TableWithLoading = withLoading(Table);

<TableWithLoading isLoading={true} dataSource={[]} columns={[]} />;

HOC позволяет разделять функциональность и не дублировать код, создавая гибкую архитектуру обёрток.

Интеграция с Form и State Management

Обёртки особенно полезны при работе с Form и глобальным состоянием через useState, useReducer или Redux. Они позволяют сосредоточить управление формами и синхронизацию с внешними данными внутри одного компонента.

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

const LoginForm = ({ onSubmit }) => {
  const [formData, setFormData] = useState({ username: '', password: '' });

  const handleChange = (field) => (e) => {
    setFormData({ ...formData, [field]: e.target.value });
  };

  return (
    <Form onFin ish={() => onSubmit(formData)}>
      <Form.Item label="Логин" name="username" rules={[{ required: true }]}>
        <Input value={formData.username} onCha nge={handleChange('username')} />
      </Form.Item>
      <Form.Item label="Пароль" name="password" rules={[{ required: true }]}>
        <Input.Password value={formData.password} onCha nge={handleChange('password')} />
      </Form.Item>
      <Button type="primary" htmlType="submit">Войти</Button>
    </Form>
  );
};

export default LoginForm;

Обёртка объединяет поля формы и управление их состоянием, сохраняя чистоту и предсказуемость кода.

Советы по организации обёрток в проекте

  • Отдельная папка для обёрток: components/wrappers/, чтобы их было легко найти.
  • Названия по назначению: ValidatedInput, CardWrapper, ActionDropdown, отражающие суть добавленной функциональности.
  • Композиция обёрток: допускается вложение одной обёртки в другую для создания более сложных компонентов без дублирования кода.
  • Документация пропсов: обязательное описание входных параметров, особенно если обёртка скрывает внутренние компоненты Ant Design.

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

Оглавление