React中JSX使用&&运算时渲染结果不一致的原因咨询

为什么当前只渲染<div>Hello World</div> #

你的代码return x && <div>Hello World</div>完全符合JavaScript逻辑与运算符（&&）的短路求值规则：

• 当x是真值（比如你定义的非空字符串"Test Member"），&&会直接返回右侧的表达式结果，也就是<div>Hello World</div>，所以最终只会渲染这个div元素。
• 只有当x是假值（比如undefined、null、空字符串""等）时，&&才会返回x本身，此时React不会渲染任何内容（因为它会忽略undefined/null这类假值）。

你之前看到同时渲染x和div的可能原因 #

你记忆中同时显示"Test Member"和Hello World的场景，大概率是之前的代码写法不同，常见的几种情况：

1. 用数组返回多个元素 #

如果之前的代码是这样：

return [x, <div>Hello World</div>]

React会渲染数组中的每一个元素，此时x（字符串）和div会依次被渲染出来，就会得到你记忆中的结果。

2. 用Fragment包裹多个元素 #

或者用React Fragment（简写为<></>）把两个内容包起来：

return (
  <>
    {x}
    <div>Hello World</div>
  </>
)

这种写法会把x和div作为兄弟元素同时渲染。

3. 把x放到div内部 #

如果之前的代码是把x写在div里面：

return <div>{x} Hello World</div>

自然也会同时显示x的值和Hello World。

总结 #

你现在的代码逻辑本身没有问题，但它的作用就是仅当x为真时渲染div，而不是同时渲染x和div。如果需要同时显示两者，就要明确把x作为独立的渲染节点，用Fragment、数组或者嵌套元素的方式组织内容。

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