三元运算符 在 React 条件渲染中使用三元表达式和 “&&”

[新产品上线] 51CTO播客，随时随地碎片化学习

反应组件可以通过多种方式决定渲染内容。您可以使用传统的if语句或switch语句。在本文中，我们将探索一些替代方案。但要注意，如果不小心，有些方案会自带陷阱。

三元表达式vs if/else

假设我们有一个传入名称属性的组件。如果这个字符串不是空，我们将显示一个问候语。否则，我们会告诉用户他们需要登录。

这是一个只实现上述功能的无状态功能组件(SFC)。

const MyComponent =(名称)= >

if(名称)

返回(& ltdiv className="hello " >您好名称& lt/div>。);

返回(& ltdiv className="hello " >请登录& lt/div>。);；

这很简单，但我们可以做得更好。这是使用三元运算符条件三元运算符编写的同一个组件。

const MyComponent =(名称)= >(& ltdiv className="hello " >名字？` Hello $name `: "请登录" & lt/div>。);

请注意，与上面的示例相比，这段代码是多么简洁。

有几点需要注意。因为我们使用arrow函数的单语句形式，所以隐含了return语句。此外，使用三元运算符允许我们省略重复

三元表达式vs &:& amp；

如您所见，三元表达式非常适合表示if/else条件表达式。但是简单的if条件表达式呢？

我们再来看一个例子。如果isPro(布尔值)为真，我们将显示一个奖杯表情。我们还想渲染星星的数量(如果不是0的话)。我们可以这样写。

const MyComponent = ( name，isPro，stars) = >(& ltdiv className="hello " >& ltdiv>。你好名字isPro？"?":null & lt/div>。明星？(& ltdiv>。星星:“”。重复(星号)和lt；/div>。):null & lt/div>。);

请注意，else条件返回null。这是因为三元表达式必须有“否则”条件。