何时在 React 中使用三元运算符而不是逻辑运算符以仅在有项目时有条件地呈现

Question

我必须（有条件地）渲染一些 React JSX 标记，只有当它包含项目时（来自 api）。

 return items?.length ? (
  <div>
    <MyBlock data={myBlockData} />
  </div>
  ) : null;

但是三元空运算符（如上）或逻辑运算符之间有什么区别：

 return items?.length && (
  <div>
    <MyBlock data={myBlockData} />
  </div>
  );

在我的情况下使用什么？

Answer 1

区别在于当你有 false(y) 条件时 JSX 将构建什么。

三元运算符将 return null 因此 DOM 节点上不会显示任何内容，而在逻辑运算符的情况下，false(y) 值将计算为 0 ，因此，您会看到“0”被添加为 DOM.

中的文本节点

如果您希望使用逻辑运算符有条件地呈现，最好添加后备。

return items?.length&& (
   <div>
     <MyBlock data={myBlockData} />
   </div>
  ) ||
  null;

When to use ternary operator over the logical operator in React to render conditionally only when there are items