При работе с React обычно используется метод `map()` для отображения списка элементов. Однако иногда вы можете захотеть условно отображать определенные элементы на основе некоторых критериев. В этом руководстве мы рассмотрим, как использовать условие внутри `map()` в React.
Использование тернарного оператора
Один из способов условно отобразить элементы внутри `map()` — использовать тернарный оператор. Основной синтаксис тернарного оператора следующий:
condition ? expressionIfTrue : expressionIfFalse
Чтобы использовать это внутри `map()`, мы можем сделать что-то вроде этого:
const items = [
{ name: 'Item 1', type: 'type1' },
{ name: 'Item 2', type: 'type2' },
{ name: 'Item 3', type: 'type1' },
{ name: 'Item 4', type: 'type2' },
];
const itemList = items.map((item, index) => (
item.type === 'type1' ? <div key={index}>{item.name}</div> : null
));
return <div>{itemList}</div>;
В этом примере у нас есть массив элементов со свойствами `name` и `type`. Мы хотим отображать только элементы с типом, равным type1. Внутри `map()` мы используем тернарный оператор, чтобы проверить, является ли тип элемента `'type1'`. Если это так, мы возвращаем элемент `div` с именем элемента. Если нет, мы возвращаем `null`.
Использование функции
Другой способ условно отображать элементы внутри `map()` — использовать функцию. Эта функция должна возвращать элемент JSX, если условие истинно, и `null`, если оно ложно. Вот пример:
const items = [
{ name: 'Item 1', type: 'type1' },
{ name: 'Item 2', type: 'type2' },
{ name: 'Item 3', type: 'type1' },
{ name: 'Item 4', type: 'type2' },
];
function renderItems(item) {
if (item.type === 'type1') {
return <div>{item.name}</div>;
}
return null;
}
const itemList = items.map((item, index) => renderItems(item, index));
return <div>{itemList}</div>;
В этом примере мы определяем функцию с именем `renderItems()`, которая принимает элемент в качестве аргумента. Внутри функции мы проверяем, является ли тип элемента `'type1'`. Если это так, мы возвращаем элемент `div` с именем элемента. Если нет, мы возвращаем `null`.
Внутри `map()` мы вызываем функцию `renderItems()` для каждого элемента в массиве. Это вернет либо элемент `div`, либо `null`, в зависимости от типа элемента.
Заключение
В этом руководстве мы рассмотрели два способа условного рендеринга элементов внутри `map()` в React. Независимо от того, предпочитаете ли вы использовать тернарный оператор или функцию, оба метода являются жизнеспособными вариантами для отображения определенных элементов в списке.