React条件渲染中if/else与三元运算符、逻辑&&是否等效？

我有一个React组件，当show为true时会渲染另一个组件：

const ChildComponent = ({ show }: Props) => {
  if (show) {
    return <AnotherChild />;
  }
  return null;
};

请问上述if/else写法与三元运算符或逻辑&&运算符的写法是否效果相同？

三元运算符写法：

return show ? (
 <AnotherChild />
) : null

逻辑&&运算符写法：

return show && <AnotherChild />

核心结论 #

当show是严格的布尔值（true/false）时，三种写法的渲染效果完全一致：show为true时渲染<AnotherChild />，为false时不渲染任何内容（返回null）。

逻辑&&写法的特殊注意事项 #

如果show的取值不是严格布尔值，而是其他真值（比如数字1、非空字符串"test"、普通对象等），逻辑&&的行为会和另外两种写法产生差异：

• if/else和三元运算符会判断show的真假性，只要是真值就渲染<AnotherChild />；
• 逻辑&&会直接返回show本身，而非null，React会把这个值渲染成DOM节点（比如数字会显示成文本，非空字符串也会直接显示）。

举个实际例子：

• 当show = 0（假值）：三种写法都返回null，行为一致；
• 当show = 2（真值）：if/else和三元运算符渲染<AnotherChild />，但逻辑&&写法会在页面上显示数字2。

所以如果能保证show始终是true或false，三种写法可以随便用；如果show可能是其他真值，更推荐用if/else或三元运算符，避免意外的渲染结果。

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