Условные операторы для отображения другого компонента React js

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

 <div>
 <Bookscard />
 </div>

так что это мой компонент, внутри компонента отображаются купленные продукты. Могу ли я получить условный оператор, который может либо показать этот компонент, например (если user.courses больше или равен 1, затем показать компонент, иначе показать текст), что-то вроде этого

Получение данных из формы с помощью JavaScript - краткое руководство
Получение данных из формы с помощью JavaScript - краткое руководство
Получить данные из формы с помощью JS очень просто: вы запрашиваете элемент формы, передаете его конструктору new FormData() и, наконец, получаете...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
1
0
29
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете попробовать это:

<div>
 { user.courses.length > 0 &&
 <Bookscard />
 }
 { user.courses.length > 0 ||
 <NoResults />
 }
</div>

Или вы можете сохранить согласованность с && с помощью:

<div>
 { user.courses.length > 0 &&
 <Bookscard />
 }
 { user.courses.length == 0 &&
 <NoResults />
 }
</div>

спасибо, брат, и, наконец, что добавить в это условие, если длина меньше 1 или нет продуктов, которые показывают h1, например, просмотр

Developer dayan 05.04.2022 18:57

Да, вы можете сделать все это с помощью ||, я отредактировал свой ответ, чтобы он был для вас.

Antoine Baqain 05.04.2022 18:58

В дополнение к ответу @Antoine Baqain вы также можете использовать тернарный оператор, например:

<div>
 { user?.courses?.length > 0 ? <Bookscard /> : <NoResults /> }
</div>

Спасибо, тоже неплохо, попробую

Developer dayan 05.04.2022 20:03

Другие вопросы по теме