为什么这个 React 组件返回字符串 '0'

Question

当我编写这段代码时，我希望我的 React 组件不显示任何内容。但是，它显示“0”。为什么是这样？

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  const object = {
    array: []
  }

  return (
    <>
    {object.array && object.array.length && (
      <p>Test</p>
    )}
    </>  
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

请参阅此代码沙箱以获取实时演示：https : //codesandbox.io/s/sad-lovelace-mmrkz

Answer 1

Reactboolean默认忽略值，但不会忽略数字。

即使array是空的，它仍然是一个真实的值。如果array.length等于0，则该段落不会被渲染，因为它0是一个假值，但它（array.length-0）仍然会被渲染，因为它基本上0是一个数字。

我建议你评估array.length一个布尔值，这样它就不会被渲染。

{object.array && !!object.array.length && (