React使用&&运算符写条件样式导致页面消失问题求解

• 首先是JavaScript && 运算符的短路返回规则：expr1 && expr2 中，如果expr1是假值，会直接返回expr1本身，不会执行/返回expr2。你的state是布尔类型，当它的值为false时，state && {textDecorationLine: 'line-through'}的返回值就是原始布尔值false。
• React对DOM元素的style属性有严格的类型校验：仅支持传入**样式对象、null、undefined**三类值，传入原始布尔值false属于非法传参，会直接触发React渲染异常。

React渲染流程中，如果遇到DOM属性传值不合法的致命错误，会中断整个组件树的渲染，直接抛出运行时错误，没有做错误边界捕获的情况下，整个页面的React内容都会卸载消失，就是你看到的白屏效果。

注意：不要把条件渲染JSX节点的&&用法和属性传值的逻辑混淆。React渲染子节点时会自动忽略true/false这类布尔值不做渲染，但DOM属性的类型校验规则完全不同，不能直接套用。

写法1：三元表达式返回合法值 #

保证假值分支返回React认可的undefined即可：

<p 
  onClick={props.crossedItemOnClick} 
  id={id} 
  className={className} 
  style={state ? {textDecorationLine: 'line-through'} : undefined}
>
  {info}
</p>

写法2：在样式对象内部做条件判断（更推荐） #

直接给具体样式属性赋值，避免整个style属性传非法值，逻辑更直观：

<p 
  onClick={props.crossedItemOnClick} 
  id={id} 
  className={className} 
  style={{ textDecorationLine: state ? 'line-through' : 'none' }}
>
  {info}
</p>

内容的提问来源于stack exchange，提问作者AoXNeR