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) => 
{reptile}
);}

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 (    
    
           {reptiles.map((reptile) => (        
     
{reptile}
      ))}    
    
  );}

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 (    
    
           {reptiles.map(reptile => (        
     
{reptile}
      ))}    
    
  );}

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 (    
alligator
    
snake
    
lizard
  );}

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 (  
    
    
     
alligator
    
     
snake
    
     
lizard
  
    
  );}

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 (  
         
     
alligator
     
     
snake
     
     
lizard
  
      );}

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 ( <>    
alligator
    
snake
    
lizard
   );}

结论 (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 series on DigitalOcean.

要了解有关React最佳实践的更多信息，请在DigitalOcean上完整的“ 系列。

翻译自:

react 渲染数组