显示不同组件的条件语句 React js

Question

我想创建一个函数或条件语句，你可以说它可以根据“如果用户购买了产品”显示不同的组件，然后显示产品组件，否则显示“只是一个简单的文本，如浏览或购买产品."

 <div>
 <Bookscard />
 </div>

这是我的组件，在组件内映射了购买的产品。我可以得到一个条件语句，它可以显示这个组件，如（如果 user.courses 大于或等于 1，则显示组件，否则显示文本）像这样

Answer 1

你可以试试这个：

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

或者您可以通过以下方式与 && 保持一致：

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

Answer 2

加上@Antoine Baqain 的回答，您也可以使用三元运算符，如下所示：

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

Conditional statements to show a different component React js