当前位置：首页 > 科技观察

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

时间：2023-03-22 01:53:57 科技观察

React组件可以通过多种方式确定要渲染的内容。您可以使用传统的if语句或switch语句。在本文中，我们将探讨一些替代方案。但请注意，如果您不小心，有些计划会带来自己的陷阱。三元表达式与if/else假设我们有一个传递了name属性的组件。如果此字符串非空，我们将显示问候语。否则，我们告诉用户他们需要登录。这是一个无状态功能组件（SFC），它只实现了上述功能。constMyComponent=({name})=>{if(name){return(你好{name}

);}return(请登录

);};这很简单，但我们可以做得更好。这是使用三元运算符条件三元运算符编写的同一组件。constMyComponent=({name})=>({name?`Hello${name}`:'请登录'}

);请注意，这段代码与上面的示例相比如何简洁。有几点需要注意。因为我们使用了箭头函数的单语句形式，所以隐含了return语句。此外，使用三元运算符允许我们省略重复的标记。三元表达式vs&&如您所见，三元表达式非常适合表达if/else条件。但是简单的if条件呢？让我们看另一个例子。如果isPro（布尔值）为真，我们将显示奖杯表情符号。我们还想渲染星星的数量（如果不是0）。我们可以这样写。constMyComponent=({name,isPro,stars})=>(

你好{name}{isPro?'?':null}

{stars?(

星星：{'☆'.repeat(stars)}

):null}

);请注意，else条件返回null。这是因为三元表达式有一个“else”条件。对于简单的if条件，我们可以使用更合适的东西：&&运算符。这是使用&&编写的相同代码。constMyComponent=({name,isPro,stars})=>(

你好{name}{isPro&&'?'}

{stars&&(

星星：{'☆'.repeat(stars)}

)});差别不大，但请注意我们消除了每个三元组的第一边：null(elseconditional)。一切都应该像以前一样呈现。嘿！当什么都不应该呈现时，john得到了什么Justa0。这就是我上面提到的陷阱。原因如下：根据MDN，逻辑运算符“与”（又名&&）：如果expr1可以转换为false，则expr1&&expr2返回expr1；否则返回expr2。因此，当与布尔值一起使用时，如果两个操作数都为真，&&返回真；否则，返回假。好吧，在你开始拔头发之前，让我为你解释一下。在我们的示例中，expr1是变量stars，其值为0，因为0为false，因此将返回并渲染0。看，这还不算太糟糕。我会简单地这样写。如果expr1为假，则返回expr1，否则返回expr2。因此，当在非布尔值上使用&&时，我们必须使false值返回一些React无法呈现的东西，比如值false。我们可以通过多种方式实现这一目标。让我们试试吧。{!!stars&&(

{'☆'.repeat(stars)}

)}注意stars之前的双感叹号(!!)（好吧，没有双感叹号，我们只用感叹号运算符两次）。第一个感叹号运算符将stars的值强制转换为布尔值并执行NOT运算。如果stars为0，则!stars将为真。然后我们执行第二个NOT操作，所以如果stars为0，!!stars将为假。正是我们想要的。如果你不喜欢!!，那么你也可以像这样强制一个布尔值（我觉得有点冗长）。{Boolean(stars)&&（或者只是使用比较器来产生一个布尔值（有人会说这更语义化）。{stars>0&&（关于字符串，空字符串和数字有同样的问题。但是由于渲染了空字符串afterthe是不可见的，所以这不是你可能会处理的难题，甚至可能不会注意到。但是，如果你是一个乐观主义者并且不希望DOM字符串上有空字符，你应该采用我们在上面对数字采取的预防措施其他解决方案将来可以扩展到其他变量的可能解决方案是创建一个单独的shouldRenderStars变量。然后使用&&来处理布尔值。constshouldRenderStars=stars>0;return(

{shouldRenderStars&&(

{'☆'.repeat(stars)}

)}

);之后，以后如果业务规则要求你还需要登录，养狗，喝啤酒，你可以改变shouldRenderStars的绘制方式，返回的内容保持不变。您还可以将此逻辑放在其他可测试的地方并保持渲染干净。constshouldRenderStars=stars>0&&loggedIn&&pet==='dog'&&beerPref==='light`;return(

{shouldRenderStars&&(

{'☆'.repeat(stars)}

)}

);结论我认为您应该充分利用这种语言。对于JavaScript，这意味着对if/else条件使用三元表达式，对if条件使用&&运算符。我们可以回到到处使用三元运算符的舒适区，但您现在拥有继续前进并取得成功的知识和力量。

上一篇：FISH-Linux下一个智能易用的Shell

下一篇：通用网络安全防御系统

在React条件渲染中使用三元表达式和“&&”相关文章

最新推荐

猜你喜欢