怎么在React条件渲染中使用三元表达式

本文介绍了“如何在React条件渲染中使用三元表达式”的知识。很多人在实际案例操作中都会遇到这样的困难。接下来，让边肖带领大家学习如何应对这些情况！希望大家认真阅读，学点东西！

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

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

constMyComponent=({ name })={ if(name){ return(div class name=' hello ' hello { name }/div)；} return(div类名=' hello ' please ignin/div)；};这很简单，但我们可以做得更好。这是使用三元运算符条件三元运算符编写的同一个组件。

constMyComponent=({ name })=(div class name=' hello ' { name？` hello $ { name } ` : ' please ignin ' }/div)；请注意，与上面的示例相比，这段代码是多么简洁。

有几点需要注意。因为我们使用箭头函数的单语句形式，所以返回语句是隐含的。此外，使用三元运算符允许我们省略重复的div className='hello '标记。

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

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

constMyComponent=({name，isPro，stars })=(div class name=' hello ' div hello { name } { isPro？null}/div{stars？(divStars: { ' ')。repeat(stars)}/div): null }/div)；注意其他情况。

返回 null 。 这是因为三元表达式要有“否则”条件。

对于简单的 if 条件式，我们可以使用更合适的东西：&& 运算符。这是使用 && 编写的相同代码。

const MyComponent = ({ name, isPro, stars}) => (  <div className="hello">    <div>      Hello {name}      {isPro && '♨'}    </div>    {stars && (      <div>        Stars:{'☆'.repeat(stars)}      </div>    )}  </div>);

没有太多区别，但是注意我们消除了每个三元表达式***面的 : null （else 条件式）。一切都应该像以前一样渲染。

嘿！约翰得到了什么？当什么都不应该渲染时，只有一个 0。这就是我上面提到的陷阱。这里有解释为什么：

根据 MDN，一个逻辑运算符“和”（也就是 &&）：

expr1 && expr2

如果 expr1 可以被转换成 false ，返回 expr1；否则返回 expr2。 如此，当与布尔值一起使用时，如果两个操作数都是 true，&& 返回 true ；否则，返回 false。

好的，在你开始拔头发之前，让我为你解释它。

在我们这个例子里， expr1 是变量 stars，它的值是 0，因为 0 是假值，0 会被返回和渲染。看，这还不算太坏。

我会简单地这么写。

如果 expr1 是假值，返回 expr1 ，否则返回 expr2。

所以，当对非布尔值使用 && 时，我们必须让这个假值返回 React 无法渲染的东西，比如说，false 这个值。

我们可以通过几种方式实现这一目标。让我们试试吧。

{!!stars && (  <div>    {'☆'.repeat(stars)}  </div>)}

注意 stars 前的双感叹操作符（!!）（呃，其实没有双感叹操作符。我们只是用了感叹操作符两次）。

***个感叹操作符会强迫 stars 的值变成布尔值并且进行一次“非”操作。如果 stars 是 0 ，那么 !stars 会是 true。

然后我们执行第二个非操作，所以如果 stars 是 0，!!stars 会是 false。正好是我们想要的。

如果你不喜欢 !!，那么你也可以强制转换出一个布尔数比如这样（这种方式我觉得有点冗长）。

{Boolean(stars) && (

或者只是用比较符产生一个布尔值（有些人会说这样甚至更加语义化）。

{stars > 0 && (

关于字符串

空字符串与数字有一样的毛病。但是因为渲染后的空字符串是不可见的，所以这不是那种你很可能会去处理的难题，甚至可能不会注意到它。然而，如果你是***主义者并且不希望 DOM 上有空字符串，你应采取我们上面对数字采取的预防措施。

其它解决方案

一种可能的将来可扩展到其他变量的解决方案，是创建一个单独的 shouldRenderStars 变量。然后你用 && 处理布尔值。

const shouldRenderStars = stars > 0;

return (  <div>    {shouldRenderStars && (      <div>        {'☆'.repeat(stars)}      </div>    )}  </div>);

之后，在将来，如果业务规则要求你还需要已登录，拥有一条狗以及喝淡啤酒，你可以改变 shouldRenderStars 的得出方式，而返回的内容保持不变。你还可以把这个逻辑放在其它可测试的地方，并且保持渲染明晰。

const shouldRenderStars =   stars > 0 && loggedIn && pet === 'dog' && beerPref === 'light`;

return (  <div>    {shouldRenderStars && (      <div>        {'☆'.repeat(stars)}      </div>    )}  </div>);

“怎么在React条件渲染中使用三元表达式”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！