В React.js функция mapобычно используется для перебора массива и создания нового массива с преобразованными или измененными элементами. Если вы хотите условно отображать элементы внутри функции map, вы можете использовать несколько подходов.
- Использование оператора if. Вы можете использовать обычный оператор
ifвнутри функцииmapдля условной визуализации элементов на основе определенного условия. Вот пример:
const array = [1, 2, 3, 4, 5];
const newArray = array.map((item) => {
if (item % 2 === 0) {
return <div>{item} is even</div>;
} else {
return <div>{item} is odd</div>;
}
});
- Использование тернарного оператора: Тернарный оператор (
условие ? выражение1 : выражение2) можно использовать для достижения условного рендеринга в функцииmap. Вот пример:
const array = [1, 2, 3, 4, 5];
const newArray = array.map((item) => (
<div>{item} is {item % 2 === 0 ? 'even' : 'odd'}</div>
));
- Фильтрация массива. Другой подход — использовать метод
filterперед функциейmap, чтобы создать новый массив, содержащий только те элементы, которые соответствуют определенному условию. Вот пример:
const array = [1, 2, 3, 4, 5];
const newArray = array
.filter((item) => item % 2 === 0)
.map((item) => <div>{item} is even</div>);
Это три распространенных подхода к условному рендерингу элементов в функции mapв React.js.