本篇内容介绍了“怎么在React条件渲染中使用三元表达式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
我们提供的服务有:成都做网站、成都网站建设、微信公众号开发、网站优化、网站认证、彭州ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的彭州网站制作公司
假设我们有一个组件被传进来一个 name
属性。 如果这个字符串非空,我们会显示一个问候语。否则,我们会告诉用户他们需要登录。
这是一个只实现了如上功能的无状态函数式组件(SFC)。
const MyComponent = ({ name }) => { if (name) { return (Hello {name}); } return (Please sign in);};
这个很简单但是我们可以做得更好。这是使用三元运算符编写的相同组件。
const MyComponent = ({ name }) => ({name ? `Hello ${name}` : 'Please sign in'});
请注意这段代码与上面的例子相比是多么简洁。
有几点需要注意。因为我们使用了箭头函数的单语句形式,所以隐含了 正如您所看到的,三元表达式用于表达 让我们看另一个例子。如果 请注意 对于简单的 没有太多区别,但是注意我们消除了每个三元表达式***面的 嘿!约翰得到了什么?当什么都不应该渲染时,只有一个 根据 MDN,一个逻辑运算符“和”(也就是 如果 好的,在你开始拔头发之前,让我为你解释它。 在我们这个例子里, 我会简单地这么写。 如果 所以,当对非布尔值使用 我们可以通过几种方式实现这一目标。让我们试试吧。 注意 ***个感叹操作符会强迫 然后我们执行第二个 如果你不喜欢 或者只是用比较符产生一个布尔值(有些人会说这样甚至更加语义化)。 空字符串与数字有一样的毛病。但是因为渲染后的空字符串是不可见的,所以这不是那种你很可能会去处理的难题,甚至可能不会注意到它。然而,如果你是***主义者并且不希望 DOM 上有空字符串,你应采取我们上面对数字采取的预防措施。 一种可能的将来可扩展到其他变量的解决方案,是创建一个单独的 之后,在将来,如果业务规则要求你还需要已登录,拥有一条狗以及喝淡啤酒,你可以改变 “怎么在React条件渲染中使用三元表达式”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!return
语句。另外,使用三元运算符允许我们省略掉重复的 三元表达式 vs &&
if
/else
条件式非常好。但是对于简单的 if
条件式怎么样呢?isPro
(一个布尔值)为真,我们将显示一个奖杯表情符号。我们也要渲染星星的数量(如果不是 0)。我们可以这样写。const MyComponent = ({ name, isPro, stars}) => (
else
条件返回 null
。 这是因为三元表达式要有“否则”条件。if
条件式,我们可以使用更合适的东西:&&
运算符。这是使用 &&
编写的相同代码。const MyComponent = ({ name, isPro, stars}) => (
: null
(else
条件式)。一切都应该像以前一样渲染。0
。这就是我上面提到的陷阱。这里有解释为什么:&&
):expr1 && expr2
expr1
可以被转换成 false
,返回 expr1
;否则返回 expr2
。 如此,当与布尔值一起使用时,如果两个操作数都是 true
,&&
返回 true
;否则,返回 false
。expr1
是变量 stars
,它的值是 0
,因为 0 是假值,0
会被返回和渲染。看,这还不算太坏。expr1
是假值,返回 expr1
,否则返回 expr2
。&&
时,我们必须让这个假值返回 React 无法渲染的东西,比如说,false
这个值。{!!stars && (
stars
前的双感叹操作符(!!
)(呃,其实没有双感叹操作符。我们只是用了感叹操作符两次)。stars
的值变成布尔值并且进行一次“非”操作。如果 stars
是 0
,那么 !stars
会是 true
。非
操作,所以如果 stars
是 0
,!!stars
会是 false
。正好是我们想要的。!!
,那么你也可以强制转换出一个布尔数比如这样(这种方式我觉得有点冗长)。{Boolean(stars) && (
{stars > 0 && (
关于字符串
其它解决方案
shouldRenderStars
变量。然后你用 &&
处理布尔值。const shouldRenderStars = stars > 0;
return (
shouldRenderStars
的得出方式,而返回的内容保持不变。你还可以把这个逻辑放在其它可测试的地方,并且保持渲染明晰。const shouldRenderStars = stars > 0 && loggedIn && pet === 'dog' && beerPref === 'light`;
return (
新闻名称:怎么在React条件渲染中使用三元表达式
网站URL:http://cdkjz.cn/article/gehjco.html