Отображение списка элементов — это то, чем постоянно занимаются веб-разработчики. В React нет стандартного способа рендеринга списка элементов, однако есть некоторые шаблоны, которые, безусловно, полезно знать. Мы собираемся изучить некоторые из них в этом посте.

Детский массив

Давайте начнем с базового подхода, который должен работать в большинстве случаев, а именно с передачи элементов списка в childrenprop.

Я использую React.Children.map , поэтому мне не нужно беспокоиться, является ли childrenэто одним элементом или массивом элементов. Обратите внимание, что ListViewкомпонент отвечает за структуру списка, в этом примере он утверждает семантически правильное ulи liрасположение тегов. Вот как может выглядеть пример использования

Очень просто, очень читабельно! Вы также можете использовать этот подход, если заранее не знаете количество элементов.

Просто помните, что каждый раз, когда вы визуализируете список, который можно переупорядочить или отфильтровать, вы должны предоставить ключевую поддержку (React предупредит вас, если вы этого не сделаете).

Рендер опоры

Второй подход более гибкий, но и несколько более сложный. Я говорю о паттерне рендеринга . Вот как может выглядеть код списка.

Возможно, вы заметили, что его нельзя использовать повторно, поскольку он явно определяет Itemтип. Мы можем сделать лучше, давайте использовать TypeScript Generics, чтобы список не был привязан к конкретному Itemинтерфейсу.

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

Обратите внимание, что TypeScript правильно интерпретирует тип элемента в rendererфункции.

Так почему же паттерн Render Prop более мощный? Он имеет доступ к необработанным данным элементов, а не только к реагирующим узлам, как в предыдущем подходе. Это может иметь много вариантов использования. В качестве примера я могу предоставить предикат, который будет использоваться для фильтрации элементов перед их отображением.

Клиент может указать любой filterFn, который принимает один элемент и возвращает логическое значение.

В этом примере будут отображаться только первые два элемента.

Резюме

Я представил некоторые основные строительные блоки, которые можно настроить для удовлетворения более специфических потребностей. Надеюсь, вы найдете их полезными, спасибо за чтение!