FlatList

Свойства

• class (string): Дополнительный CSS-класс для корневого элемента списка.
• classList (Record<string, boolean | undefined>): Объект классов для динамического управления стилями. Позволяет добавлять или удалять классы в зависимости от состояния.
• disabled (boolean): Если установлено в true, отключает взаимодействие со списком (например, предотвращает клики).
• items (FlatListItem[]): Массив элементов списка. Каждый элемент представляет объект FlatListItem, который может содержать текст заголовка, контент и информацию о том, является ли элемент разелителем.
• selected (FlatListItem['id']): Идентификатор выбранного элемента. Если передан, элемент с этим идентификатором будет отмечен как выбранный.
• onClick *(function(item: FlatListItem)): Функция-обработчик кликов по элементам списка. Принимает в качестве аргумента элемент списка, по которому был произведен клик.

FlatListItem

Объект FlatListItem представляет элемент списка в компоненте FlatList. Этот объект может содержать данные для отображения заголовка, контента, а также может быть использован как разделитель списка.

Свойства FlatListItem

• id (string | number | null | boolean | Date):
  Идентификатор элемента списка. Это поле используется для идентификации элемента и для отметки его как выбранного через свойство selected компонента FlatList.
• title (string):
  Заголовок элемента списка. Это обязательное поле, отображаемое в интерфейсе. Если не используется свойство content, заголовок будет основным отображаемым текстом элемента.
• separator (true):
  Если установлено в true, элемент будет являться разделителем в списке. Разделители обычно отображаются как визуальные границы между группами элементов списка. Если этот параметр установлен, элемент рендерится с классом FlatList__separator и может отображать свой title или content в качестве разделителя.
• content (JSXElement):
  Опциональное свойство для кастомного контента, который будет отображаться вместо заголовка. Может быть использован для отображения JSX-компонентов или другого сложного контента в элементе списка.

Важные моменты

• clickHandler:
  Обработчик события клика по элементу списка. Он извлекает индекс элемента, на который кликнули, и вызывает функцию onClick, если она была передана.