List

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

Базовый импорт компонента осуществляется следующим образом:

import { List } from 'antd';

Структура базового списка

Простейший список создаётся с использованием свойства dataSource и функции renderItem:

const data = [
  'Элемент 1',
  'Элемент 2',
  'Элемент 3',
];

<List
  dataSource={data}
  renderItem={item => (
    <List.Item>{item}</List.Item>
  )}
/>
  • dataSource — массив данных для отображения.
  • renderItem — функция, которая определяет, как будет отображён каждый элемент списка.

Кастомизация элементов списка

Компонент List.Item поддерживает вложенные элементы, дополнительные действия и метаданные. Для отображения сложных объектов удобно использовать List.Item.Meta:

import { Avatar, List } from 'antd';

const users = [
  { name: 'Иван Иванов', description: 'Frontend разработчик', avatar: 'https://i.pravatar.cc/150?img=1' },
  { name: 'Мария Петрова', description: 'Backend разработчик', avatar: 'https://i.pravatar.cc/150?img=2' },
];

<List
  itemLayout="horizontal"
  dataSource={users}
  renderItem={user => (
    <List.Item
      actions={[<a key="edit">Редактировать</a>, <a key="delete">Удалить</a>]}
    >
      <List.Item.Meta
        avatar={<Avatar src={user.avatar} />}
        title={user.name}
        description={user.description}
      />
    </List.Item>
  )}
/>

Ключевые свойства List.Item.Meta:

  • avatar — аватар или иконка элемента.
  • title — заголовок элемента.
  • description — описание или дополнительная информация.

Пагинация и загрузка данных

Списки с большим количеством элементов удобно разбивать на страницы. Для этого используется свойство pagination:

<List
  dataSource={Array.from({ length: 50 }, (_, i) => `Элемент ${i + 1}`)}
  renderItem={item => <List.Item>{item}</List.Item>}
  pagination={{
    pageSize: 10,
    showSizeChanger: true,
    onChange: page => console.log('Текущая страница:', page),
  }}
/>

Важные моменты при пагинации:

  • pageSize — количество элементов на одной странице.
  • showSizeChanger — отображение селектора количества элементов на странице.
  • onChange — обработчик изменения страницы.

Версии списка

  1. Горизонтальный и вертикальный список Свойство itemLayout позволяет выбирать направление элементов:

    <List itemLayout="vertical">...</List>
<List itemLayout="horizontal">...</List>

  2. Списки с обложками (grid) Использование сетки для отображения карточек:

    <List
  grid={{ gutter: 16, column: 4 }}
  dataSource={data}
  renderItem={item => (
    <List.Item>
      <div style={{ padding: 20, background: '#fafafa', textAlign: 'center' }}>{item}</div>
    </List.Item>
  )}
/>

    Параметры сетки (grid):

    • gutter — расстояние между колонками.
    • column — количество колонок.

Загрузка данных и состояние загрузки

Компонент поддерживает отображение состояния загрузки с помощью свойства loading:

<List
  dataSource={data}
  renderItem={item => <List.Item>{item}</List.Item>}
  loading={{ spinning: true, tip: 'Загрузка данных...' }}
/>

Особенности loading:

  • spinning — включение анимации загрузки.
  • tip — текст подсказки для пользователя.

Дополнительные возможности

  1. Footer и Header списка

    <List
  header={<div>Заголовок списка</div>}
  footer={<div>Подвал списка</div>}
  dataSource={data}
  renderItem={item => <List.Item>{item}</List.Item>}
/>

  2. Встроенные действия для элементов Любое действие можно добавить в массив actions внутри List.Item. Например, кнопки, ссылки или иконки.

  3. Настройка разделителей и стилизация С помощью CSS или стилей Ant Design можно кастомизировать границы и отступы, используя классы ant-list-item и ant-list-item-meta.

Практические рекомендации

  • Для больших массивов данных использовать pagination или виртуализированные списки (react-window) для оптимизации производительности.
  • Для отображения карточек с изображениями применять grid, чтобы элементы красиво выстраивались по сетке.
  • Метаданные (Meta) позволяют разделять визуальные и текстовые элементы, сохраняя чистоту кода.
  • Комбинировать actions с событиями клика для создания интерактивных списков.

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

Оглавление