如何使用 map() 在 ReactJS 中创建列表？

JavaScript 中的数组带有大量可供使用的函数。 map() 就是这样一个函数，用于通过在数组的每个元素上调用函数来创建对象列表。在 React 中，我们可以使用 map()函数将值列表映射到组件列表。

让我们看看如何使用一个简单的项目在 react 中创建一个列表。该项目有一个水果名称列表，我们将它们更改为在浏览器中呈现的组件列表。

创建 React 应用程序并安装模块：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app listmapdemo

• 第 2 步：创建项目文件夹后，即 listmapdemo ，使用以下命令移动到该文件夹：

  cd listmapdemo

项目结构：它将如下所示。

项目结构

示例：使用地图创建组件时，react 期望将一个 key prop 传递给正在构建的每个组件。如果没有传递密钥，它仍然会呈现，但你会在控制台中看到来自 React 的警告。在 App.js 文件中，我们定义了一个水果列表，然后将其映射到一个 div 列表。

App.js

import React from "react"
  
function App() {
  
  // Declared an array of items
  const fruits = [
    'Apple',
    'Mango',
    'Banana',
    'GFG'
  ];
  
  // Some styling for the items
  const styles = {
    backgroundColor: 'white',
    width: '50px',
    marginBottom: '10px',
    padding: '10px',
    color: 'green',
    boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px',
  };
  
  return <>
    {
      /*  This maps each array item to a div adds
      the style declared above and return it */
      fruits.map(fruit => 
{fruit}
)
    }
  ;
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

说明：我们声明了一个用于渲染 div 的水果列表。样式对象包含每个项目的 CSS 样式，它只是添加了一些边距、填充和一些阴影。最后，App函数返回一个 div 列表，这些 div 是通过在 fruits 数组上调用 map() 返回的。我们将样式对象添加到每个 div 的样式属性中。