react 渲染数组_了解如何在React中渲染数组

忘是亡心i 2022-11-28 15:25 403阅读 0赞

react 渲染数组

### 介绍 **(**Introduction**)** ###

This article will teach you how to render an array in React and the best practices to use when rendering different elements within components.

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

One of the advantages of using a modern web language like JavaScript is that you can quickly automate the generation of HTML chunks.

使用JavaScript之类的现代Web语言的优点之一是，您可以快速自动化HTML块的生成。

Using something like a loop against an array or an object means you only have to write the HTML per item one time. Better yet, any future edits only have to be applied once.

对数组或对象使用类似循环的方法意味着您只需一次为每个项目编写HTML。 更好的是，以后所有的编辑只需应用一次。

## 渲染多个元素 **(**Rendering Multiple Elements**)** ##

To render multiple JSX elements in React, you can loop through an array with the `.map()` method and return a single element.

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

Below, you loop through the `reptiles` array and return a `li` element for each item in the array. You can use this method when you want to display a single element for each item in the array:

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

function ReptileListItems() {
      const reptiles = ["alligator", "snake", "lizard"];
    
      return reptiles.map((reptile) => <li>{reptile}</li>);
    }

The output will look like this:

输出将如下所示：

Output - alligator
    - snake
    - lizard

In the next example, you will examine why you would want to add a unique `key` to a list of elements rendered by an array.

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

## 渲染组件内部的元素集合 **(**Rendering a Collection of Elements Inside a Component**)** ##

In this example, you loop through an array and create a series of list item components like the previous example.

在此示例中，您将遍历数组并创建一系列列表项组件，如上例所示。

To start, update the code to use the `<ol>` component to hold the `<li>` items. The `<ol>` component will create an ordered list of the items:

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

function ReptileList() {
      const reptiles = ["alligator", "snake", "lizard"];
    
      return (
        <ol>
          {reptiles.map((reptile) => (
            <li>{reptile}</li>
          ))}
        </ol>
      );
    }

However, if you look at the console, you will see a warning that each child in an array or iterator should have a unique key.

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

The warning appears because when you attempt to render a collection inside a component, you must add a `key`.

出现警告是因为，当您尝试在组件内部渲染集合时，必须添加一个`key` 。

In React, a unique `key` is used to determine which of the components in a collection needs to be re-rendered. Adding a unique `key` prevents React from having to re-render the entire component each time there is an update.

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

In this step, you will render multiple elements in a component and add a unique `key`. Update the code to include a `key` on the list items to resolve the warning:

在此步骤中，您将在一个组件中渲染多个元素并添加一个唯一`key` 。 更新代码以在列表项上包括`key`以解决警告：

function ReptileList() {
      const reptiles = ['alligator', 'snake', 'lizard'];
    
      return (
        <ol>
          {reptiles.map(reptile => (
            <li key={reptile}>{reptile}</li>
          ))}
        </ol>
      );
    }

Now that you’ve added in a `key`, the warning will no longer be in the console.

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

In the next example, you will see how to render adjacent elements without encountering a common syntax error.

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

## 渲染相邻元素 **(**Rendering Adjacent Elements**)** ##

In JSX, to render more than one element in a component you must add a wrapper around them.

在JSX中，要在组件中呈现多个元素，必须在它们周围添加包装器。

In this example, you will first return a list of items without looping through an array:

在此示例中，您将首先返回项目列表，而无需遍历数组：

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

This will give you a hard error in the console:

这将在控制台中给您带来硬错误：

To fix this error you need to wrap the block of `li` elements in a wrapper. For a list you can wrap them in an `ol` or `ul` element:

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

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

The adjacent `<li>` elements are now wrapped in an enclosing tag, `<ol>`, and you will no longer see an error.

现在，相邻的`<li>`元素包装在一个封闭标签`<ol>` ，您将不再看到错误。

In the next section, you will render a list in a wrapper using a `fragment` component.

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

## 使用`React.fragment`渲染相邻元素 **(**Rendering Adjacent Elements with `React.fragment`**)** ##

Prior to React v16.2, you could wrap a block of components in a `<div>` element. This would lead to an application full of `divs`, often referred to as “*div soup*”.

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

To fix this issue, React released a new component known as the `fragment` component:

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

When you need to render a list inside an enclosing tag but want to avoid having to use a `div`, you can use `React.Fragment` instead:

当您需要在封闭标签中呈现列表但又想避免使用`div` ，可以使用`React.Fragment`代替：

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

The rendered code will only include the `li` elements and the `React.Fragment` component will not appear in the code.

呈现的代码将仅包含`li`元素，而`React.Fragment`组件将不会出现在代码中。

Also, note with `React.fragment` there is no need to add a key.

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

You may notice writing `React.fragment` is more tedious than adding a `<div>`. Fortunately, the React team developed a shorter syntax to represent this component. You can use `<> </>` in place of `<React.Fragment></React.Fragment>`:

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

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

## 结论 **(**Conclusion**)** ##

In this article, you explored various examples of how to render arrays in a React application.

在本文中，您探讨了如何在React应用程序中渲染数组的各种示例。

When rendering an element inside another component, you should use a unique `key` and wrap your elements inside a wrapper element.

在另一个组件内渲染元素时，应使用唯一`key`并将元素包装在包装元素内。

Depending on your use case, you can create simple lists wrapped in a `fragment` component that does not need a key.

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

To learn more about best practices in React, follow the full [How To Code in React.js][] series on DigitalOcean.

要了解有关React最佳实践的更多信息，请在DigitalOcean上[阅读React.js中][How To Code in React.js]完整的“ [如何编写代码”][How To Code in React.js]系列。

> 翻译自: [https://www.digitalocean.com/community/conceptual\_articles/understanding-how-to-render-arrays-in-react][https_www.digitalocean.com_community_conceptual_articles_understanding-how-to-render-arrays-in-react]

react 渲染数组

[How To Code in React.js]: https://www.digitalocean.com/community/tutorial_series/how-to-code-in-react-js
[https_www.digitalocean.com_community_conceptual_articles_understanding-how-to-render-arrays-in-react]: https://www.digitalocean.com/community/conceptual_articles/understanding-how-to-render-arrays-in-react