Question

我不知道为什么，但是页面上呈现了0的负载。最后，我将其范围缩小到零/ 0，这不是我强制要成为布尔值。 React不会呈现0

以外的任何其他数字

为什么0渲染但为什么10无法渲染？

function App() {
  const weirdOh = -0;
  const testParam = true;

  return (
    <div className="App">
      {testParam && weirdOh && <h1>Will Show</h1>}
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

修复

{testParam && !!weirdOh && <h1>Will SHow</h1>}

Answer 1

数字是react中完全有效的值，而0就是数字。

请确保将其转换为布尔值以避免发生这种情况，因为false不会呈现任何内容：

{testParam && !!weirdOh && <h1>Will Show</h1>}

或

{testParam && weirdOh !== 0 && <h1>Will Show</h1>}

如果您将weirdOh设置为非零数字，那么它不会是虚假的，并且您的<h1>将从表达式中返回并呈现。

这与反应无关，而只是JS中&&的工作方式：

(1 && 'test') === 'test'是因为获得真实值之后，您将转到链中的下一个
(0 && 'test') === 0，因为一旦您发现虚假值，就会立即使用该值

在有条件的情况下使用“ 0”时，为什么在React中渲染“ 0”？

1 个答案: