在 React 中有条件地渲染多个元素

作者

在 React 中有条件地渲染多个元素

Conditionally render multiple elements in React

使用三元运算符在 React 中有条件地渲染多个元素。当返回多个兄弟元素时，确保将它们包装在 React 片段中。

应用程序.js
export default function App() {
  const str = 'hi';

  return (
    <div>
      {str.length === 2 ? (
        <>
          <h2>First</h2>
          <h2>Second</h2>
        </>
      ) : null}
    </div>
  );
}

我们使用
三元运算符
有条件地渲染多个元素。

if/else三元运算符与语句非常相似。

如果问号左边的值为真，则运算符返回冒号左边的值，否则返回冒号右边的值。

应用程序.js
const result1 = 5 === 5 ? 'yes' : 'no';
console.log(result1); // 👉️ "yes"

const result2 = 5 === 10 ? 'yes' : 'no';
console.log(result2); // 👉️ "no"

如果字符串hi有一个2字符长度，我们返回 DOM 元素，否则false返回。

请注意，我们将兄弟元素包装在一个
React 片段中。

当我们需要在不向 DOM 添加额外节点的情况下对子列表进行分组时，会使用片段。

您可能还会看到使用了更冗长的片段语法。

应用程序.js
import React from 'react';

export default function App() {
  const str = 'hi';

  return (
    <div>
      {str.length === 2 ? (
        <React.Fragment>
          <h2>First</h2>
          <h2>Second</h2>
        </React.Fragment>
      ) : null}
    </div>
  );
}

上面的两个示例实现了相同的结果——它们对子元素列表进行分组，而不向 DOM 添加额外的节点。

您可能还会在网上看到使用逻辑与 (&&) 运算符有条件地呈现多个元素的示例。

应用程序.js
export default function App() {
  const str = 'hi';

  return (
    <div>
      {str.length === 2 && (
        <>
          <h2>First</h2>
          <h2>Second</h2>
        </>
      )}
    </div>
  );
}

逻辑与 (&&)运算符如果为假，则返回左侧的

值，否则返回右侧的值。

JavaScript 中的假值是：null, undefined, 0, false, ""
（空字符串），NaN（不是数字）。

请注意，这0是一个假值，因此如果您尝试使用逻辑与 (&&) 有条件地检查数组的长度，您可能最终会呈现一个0.

应用程序.js
export default function App() {
  const arr = [];

  return (
    <div>
      {arr.length && (
        <>
          <h2>arr[0]</h2>
          <h2>arr[1]</h2>
        </>
      )}
    </div>
  );
}

如果加载该示例，您会看到它呈现0. 原因是 –0
是一个虚假值，因此它从逻辑 AND (&&) 运算符返回。

解决这个问题的一种方法是显式检查数组的长度是否大于0.

应用程序.js
export default function App() {
  const arr = [];

  return (
    <div>
      {arr.length > 0 && (
        <>
          <h2>arr[0]</h2>
          <h2>arr[1]</h2>
        </>
      )}
    </div>
  );
}

上面的例子不会渲染任何东西，因为数组的长度是0. 这是预期的行为。

–