介绍

本文将教你如何在 React 中渲染数组，以及在组件中渲染不同元素时使用的最佳实践。

使用像 JavaScript 这样的现代 Web 语言的优势之一是您可以快速自动生成 HTML 块。

对数组或对象使用循环之类的东西意味着您只需为每个项目编写一次 HTML。更好的是，任何未来的编辑都只需应用一次。

渲染多个元素

要在 React 中渲染多个 JSX 元素，您可以使用.map()方法遍历数组并返回单个元素。

下面，您遍历reptiles数组并li为数组中的每个项目返回一个元素。当您想为数组中的每个项目显示单个元素时，可以使用此方法：

function ReptileListItems() {
  const reptiles = ["alligator", "snake", "lizard"];

  return reptiles.map((reptile) => <li>{reptile}</li>);
}

输出将如下所示：

Output
- alligator
- snake
- lizard

在下一个示例中，您将检查为什么要向key由数组呈现的元素列表添加唯一项。

渲染组件内的元素集合

在此示例中，您将遍历一个数组并创建一系列列表项组件，就像前面的示例一样。

首先，更新代码以使用<ol>组件来保存<li>项目。该<ol>组件将创建项目的有序列表：

function ReptileList() {
  const reptiles = ["alligator", "snake", "lizard"];

  return (
    <ol>
      {reptiles.map((reptile) => (
        <li>{reptile}</li>
      ))}
    </ol>
  );
}

但是，如果您查看控制台，您会看到一个警告，指出数组或迭代器中的每个子项都应该有一个唯一的键。

出现警告是因为当您尝试在组件内呈现集合时，您必须添加一个key.

在 React 中，uniquekey用于确定集合中的哪些组件需要重新渲染。添加唯一性key可以防止 React 每次更新时都必须重新渲染整个组件。

在这一步中，您将在一个组件中渲染多个元素并添加一个唯一的key. 更新代码以key在列表项中包含一个以解决警告：

function ReptileList() {
  const reptiles = ['alligator', 'snake', 'lizard'];

  return (
    <ol>
      {reptiles.map(reptile => (
        <li key={reptile}>{reptile}</li>
      ))}
    </ol>
  );
}

现在您已经添加了key，警告将不再出现在控制台中。

在下一个示例中，您将看到如何在不遇到常见语法错误的情况下呈现相邻元素。

渲染相邻元素

在 JSX 中，要在一个组件中渲染多个元素，您必须在它们周围添加一个包装器。

在此示例中，您将首先返回一个项目列表，而不循环遍历数组：

function ReptileListItems() {
  return (
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  );
}

这将在控制台中给你一个硬错误：

要修复此错误，您需要将li元素块包装在包装器中。对于列表，您可以将它们包装在一个ol或ul元素中：

function ReptileListItems() {
  return (
  <ol>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  </ol>
  );
}

相邻<li>元素现在包含在封闭标记 中，<ol>您将不再看到错误。

在下一节中，您将使用fragment组件在包装器中呈现列表。

渲染相邻元素 React.fragment

在 React v16.2 之前，你可以在一个<div>元素中包装一块组件。这将导致应用程序充满divs，通常被称为“ div 汤”。

为了解决这个问题，React 发布了一个名为组件的新fragment组件：

当您需要在封闭标签内呈现列表但又不想使用 a 时div，您可以React.Fragment改用：

function ReptileListItems() {
  return (
  <React.Fragment>
     <li>alligator</li>
     <li>snake</li>
     <li>lizard</li>
  </React.Fragment>
  );
}

渲染的代码将只包含li元素，React.Fragment组件不会出现在代码中。

另外，请注意React.fragment无需添加密钥。

您可能会注意到编写React.fragment比添加<div>. 幸运的是，React 团队开发了一种更短的语法来表示这个组件。您可以使用<> </>代替<React.Fragment></React.Fragment>：

function ReptileListItems() {
  return (
 <>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
 </>
  );
}

结论

在本文中，您探索了如何在 React 应用程序中呈现数组的各种示例。

当在另一个组件中渲染一个元素时，你应该使用一个 uniquekey并将你的元素包装在一个包装元素中。

根据您的用例，您可以创建包装在fragment不需要键的组件中的简单列表。

要了解有关 React 最佳实践的更多信息，请关注DigitalOcean 上完整的“如何在 React.js 中编码”系列。