React组件isVisible为undefined时显示异常：两种实现差异排查

给定以下React伪代码，预期两种实现都在isVisible为true时显示Item，为false或undefined时隐藏，但实际测试发现isVisible为undefined时，实现A的Item仍显示，实现B正常隐藏，具体原因解析如下：

const foo = true
const isVisible = true // Possible values are true, false and undefined

// Implementation A
<Item
  visible = {foo && isVisible}
/>

// Implementation B
{isVisible && (<Item
  visible = {foo}
/>)}

const Item = ({visible = true, bar = {}}) => 
 (!!visible && (<Item>{bar}</Item>)) 
 || null;

• 实现A的问题：当isVisible为undefined时，foo && isVisible的运算结果是undefined（逻辑与&&在第一个操作数为真时，会直接返回第二个操作数的值）。而Item组件的visible属性设置了默认值true，当传入undefined时，组件会使用这个默认值，此时!!visible等价于!!true，结果为true，所以组件会正常渲染，导致显示。

• 实现B的逻辑：当isVisible为undefined时，isVisible && (...)的运算结果是undefined，在React的JSX语法中，undefined、null、false这类假值不会被渲染，所以整个Item组件根本不会被实例化，自然就隐藏了。

内容的提问来源于stack exchange，提问作者Siang Cheng Pang