react 遇到短路操作的渲染问题

[JslinSir]

react 遇到短路操作的渲染问题

问题产生

今天组内同学发现了个问题，代码如下:

   {
       0 && <div>xxxx<div> 
   }

这种短路操作符写法，如果第一个为 假，则返回 第一个值，所以页面就会渲染 0

产生原因

• react 中的 jsx 是一个 表达式，当采用 短路写法的时候 如果的一个 值为 0 为假，则 会返回 0

• a && b ,如果a 我假，则返回 a

• a && b ,如果b 我假，则返回 b

  如何规避？

  • 尽量用三目运算符书写
  • 如果想用这种短路写法，需要明确几点：

  数组，最好 list.length>0 && <>xxxx</>
  数字, 最好 String(a) && <>xxxx</>
  字符串为空，就渲染空，可以不做处理
  对象 总为真