Вещи, которые я узнал на 4-й день…
Вещи, которые я узнал сегодня:
- Условный рендеринг
- Списки визуализации
1. Условный рендеринг
- Условный рендеринг очень важен, потому что он рендерит JSX в зависимости от условия, точно так же, как оператор if…else в JavaScript.
- Есть 2 способа сделать условный рендеринг (если не больше).
Использование оператора if…else и использование тернарного оператора? :
- Вы также должны помнить об коротком замыкании (
&&
и||
) при написании операторов условного рендеринга. Чтобы вы тоже могли ими воспользоваться! - Обязательно ознакомьтесь с этой статьей React для получения дополнительной информации! — https://react.dev/learn/conditional-рендеринг
2. Списки визуализации
- Если вы хотите, чтобы список элементов или данных отображался один за другим в React, вы можете отображать их с помощью объектов в JavaScript. Вот так:
- Вот код для компонента Profiles:
- Вот результат:
- Обратите внимание, что я использовал методы
filter()
иmap()
для хранения значений внутри массива на основе другого условия, которое было указано в методеfilter()
. - Если вы видите консоль в браузере, вы можете увидеть, что есть ошибка, которая запрашивает у нас ключи для наших списков. О чем я расскажу завтра!
На этом пока все…🚀
Завтра я расскажу о понятиях ключей, useState()
и других связанных с ними вещей.
Я надеюсь, что вы найдете этот блог полезным. Если да, то не забудьте сообщить мне об этом, комментируя, аплодируя и поделившись этим блогом с вашими дружелюбными разработчиками!
До свидания…😁🤟
Ресурсы, которые я использовал при создании этого блога
- Как использовать массив, который был передан как props от компонента к другому компоненту: https://bobbyhadz.com/blog/react-pass-array-as-prop
- Списки визуализации и другая важная информация о них: https://react.dev/learn/rendering-lists
- React считает ваши функции/компоненты чистыми функциями: https://react.dev/learn/keeping-components-pure