Переопределение рендеров

Библиотека Ant Design предоставляет широкие возможности для кастомизации компонентов через переопределение их рендеров. Это позволяет изменять внешний вид и поведение компонентов, сохраняя при этом их встроенную функциональность. Основным инструментом для этого является свойство render и связанные API, такие как renderItem, renderFormItem, renderText и cellRender в компонентах таблиц и списков.

Переопределение рендера ячеек таблицы

Компонент Table в Ant Design позволяет задавать кастомный рендер для каждой колонки через свойство render объекта колонки:

import { Table, Tag } from 'antd';

const columns = [
  {
    title: 'Имя',
    dataIndex: 'name',
    key: 'name',
    render: (text, record) => <b>{text}</b>
  },
  {
    title: 'Статус',
    dataIndex: 'status',
    key: 'status',
    render: status => {
      const color = status === 'Активен' ? 'green' : 'volcano';
      return <Tag color={color}>{status}</Tag>;
    }
  }
];

const data = [
  { key: 1, name: 'Иван', status: 'Активен' },
  { key: 2, name: 'Мария', status: 'Неактивен' }
];

<Table columns={columns} dataSource={data} />
  • text — значение поля из dataIndex.
  • record — вся запись строки, что позволяет использовать несколько полей для рендера.
  • Возможность возвращать JSX открывает широкий простор для кастомного отображения: добавление иконок, стилизованных блоков, кнопок управления.

Кастомизация форм и элементов формы

В компоненте Form для полей можно использовать свойство renderFormItem, чтобы переопределить стандартный рендер. Особенно актуально это при работе с динамическими формами или сложными компонентами вроде селекторов с асинхронной загрузкой данных:

import { Form, Input, Sel ect } from 'antd';

const { Option } = Select;

<Form>
  <Form.Item
    label="Имя пользователя"
    name="username"
    renderFormItem={(item, config, form) => (
      <Input placeholder="Введите имя" style={{ borderColor: 'blue' }} />
    )}
  />
  <Form.Item
    label="Роль"
    name="role"
    renderFormItem={(item) => (
      <Select>
        <Option value="admin">Администратор</Option>
        <Option value="user">Пользователь</Option>
      </Select>
    )}
  />
</Form>
  • renderFormItem принимает стандартные параметры поля, конфигурацию и объект формы для управления значениями.
  • Позволяет добавлять кастомные стили, обрабатывать события или полностью заменять компонент.

Кастомные элементы в списках и карточках

Компоненты List и Card также поддерживают кастомные рендеры через renderItem и actions.

import { List, Avatar, Button } fr om 'antd';

const data = [
  { title: 'Документ 1', author: 'Иван' },
  { title: 'Документ 2', author: 'Мария' }
];

<List
  itemLayout="horizontal"
  dataSource={data}
  renderItem={item => (
    <List.Item
      actions={[<Button type="link">Редактировать</Button>]}
    >
      <List.Item.Meta
        avatar={<Avatar>{item.author[0]}</Avatar>}
        title={<a href="#">{item.title}</a>}
        description={`Автор: ${item.author}`}
      />
    </List.Item>
  )}
/>
  • renderItem позволяет полностью контролировать структуру каждого элемента списка.
  • Можно комбинировать внутренние компоненты Ant Design для создания сложных пользовательских блоков.

Использование cellRender в Pro Components

В расширенных компонентах вроде ProTable для рендеринга отдельных ячеек применяют свойство render или renderText.

import { ProTable } from '@ant-design/pro-components';

const columns = [
  {
    title: 'Имя',
    dataIndex: 'name',
    render: (_, record) => <span style={{ color: 'purple' }}>{record.name}</span>
  },
  {
    title: 'Дата регистрации',
    dataIndex: 'createdAt',
    renderText: (text) => new Date(text).toLocaleDateString()
  }
];
  • renderText подходит, когда нужно преобразовать текст без сложного JSX.
  • render предоставляет полный контроль, включая вложенные компоненты, кнопки, иконки и т. д.

Рекомендации по организации кастомных рендеров

  1. Вынос логики в отдельные функции — упрощает поддержку и тестирование.
  2. Минимизация inline-рендеров в больших таблицах — повышает производительность.
  3. Использование утилит Ant Design (например, Tag, Badge, Tooltip) — сохраняет единый стиль интерфейса.
  4. Комбинирование record и dataIndex для получения полного контекста при рендеринге.

Переопределение рендеров — ключевой инструмент Ant Design для построения сложных интерфейсов с кастомной визуализацией данных и расширенной интерактивностью. Оно позволяет интегрировать внешние компоненты, стилизованные блоки и бизнес-логику, не ломая внутренние механизмы библиотеки.

Оглавление