React：如何使用条件渲染

作者汲古

以适当的方式使用 && 以防止 UI 错误

React：如何使用条件渲染插图
图片来源

如果你看过任何 React 应用程序，你就会知道如何根据props和state有条件地渲染组件的一部分。虽然有多种条件渲染方式，但本文重点介绍 JavaScript&&运算符。如此强调的主要原因是&&操作符经常导致 UI 错误，这些错误很容易避免并且通常不会被提及。

&&作为 React 开发人员，我们经常根据 props 的值或状态使用条件渲染。如果错误地使用条件渲染，用户可能会遇到 UI 错误。

也可以看看:

如何使用 ”＆＆”

逻辑 AND ( &&)（逻辑合取）是一个 JavaScript 运算符。根据MDN：“运算符返回从左到右求值时遇到的第一个假操作数的值，如果它们都是真值，则返回最后一个操作数的值。”

const a = 3;
const b = -2;
console.log(a > 0 && b > 0); // false
true && alert('Hello'); // This will popup an alert
false && alert('Hello'); // This won't popup an alert

现在让我们在 React 中使用相同的概念。看下面刚刚写的代码：

const Component = ({ value }) => {
  return (
    <>
      { 
        value && <h1> My name is Harsh </h1> 
      }
    </>
  );
}

如你所知，

  • 如果value为真，My name is Harsh将被渲染
  • 如果value为假，My name is Harsh将被渲染

&& 的问题

一切正常，直到第一个条件是0orundefined让我们看看当第一个条件是 时发生了什么0。

const Component = () => {
const value = 0
  return (
    <>
      { 
        value && <h1> My name is Harsh </h1> 
      }
    </>
  );
}

在这里，您希望您的组件呈现My name is Harsh但第一个值是Zero(0)，并且根据 JS 规则，它将简单地0作为输出返回。您的 UI 将呈现0. 现在它不是你想要渲染的。

对于第二种情况，我们假设该值未定义。您的返回不会呈现任何内容，因此 React 会抛出错误："Uncaught Error: Error(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."

解决方案

在这种情况下，您在使用&&. 那么，解决方案是什么？有一种解决方法，可以使用javascript的三元运算来避免&&like带来的问题：value ? <Component /> : null

除此之外，您还可以使用!运算符，这又是一个 JS 逻辑非运算符。根据官方文档：“!运算符将真值变为假值，反之亦然。它通常与布尔（逻辑）值一起使用。当与非布尔值一起使用时，false如果其单个操作数可以转换为，则返回true；否则，返回true。在 React 中你可以使用 as:!!condition && <Component/>

结论

为了防止 UI 错误，有必要在使用条件渲染之前知道变量的值。如果值来自 API 或其他来源，您可以发出&&并使用三元运算符，而无需任何其他想法。

希望你学到一些重要的东西。如果您喜欢这篇文章，请分享给有需要的人。

类似文章