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

默认情况下，React会忽略boolean值，但不会忽略数字。

即使array为空，它仍然是真实值。如果array.length等于0，则由于0是一个伪造的值，所以不呈现该段落，但是仍然呈现（array.length-0），因为基本上是{{1 }}是一个数字。

我建议您将0评估为布尔值，这样它就不会被渲染。

array.length

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

1 个答案: