从 ReactJS 中的数据数组呈现组件列表的典型模式是什么？

从数据数组呈现组件列表的模式可以通过将所有单独的自定义数据块映射到组件来完成。使用 map函数，我们将在一行代码中将数组的每个元素数据映射到自定义组件。

让我们创建一个 React 应用程序并查看从数据数组中呈现组件列表的模式。

创建反应应用程序

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

npx create-react-app example

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

cd example

第 3 步：在 react 项目目录的 src 文件夹中创建文件夹 components，并在 components 文件夹中创建文件 List.jsx。

项目结构：它看起来像这样。

示例 1 ：呈现列表的基本示例。在 index.js、App.js 和 List.jsx 文件中写下以下代码。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);
  
// If you want to start measuring 
// performance in your app, pass a 
// function to log results 
reportWebVitals();

应用程序.js

import React from "react";
import List from "./components/List";
  
function App() {
  const Users = [
    // Array of  students data
    {
      name: "Deepak",
      rollNo: "123",
    },
    {
      name: "Yash",
      rollNo: "124",
    },
    {
      name: "Raj",
      rollNo: "125",
    },
    {
      name: "Rohan",
      rollNo: "126",
    },
    {
      name: "Puneet",
      rollNo: "127",
    },
    {
      name: "Vivek",
      rollNo: "128",
    },
    {
      name: "Aman",
      rollNo: "129",
    },
  ];
  return (
    

        

            Rendering List of components
            with array of data
        
        {Users.map((user, index) => {
        return ;
        })}
    
  );
}
  
export default App;

List.js

import React from "react";
  
function List(props) {
    return (
        

            
Name of student {props.name}
            
Roll number of student {props.roll}
        
    );
}
  
export default List;

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：我们在 App.js 文件中获取了一组学生数据，然后我们创建了一个组件 List.jsx，其中传递了数组数据，并在映射函数的帮助下，我们将 List 组件映射到了一个数据数组。然后在 props 的帮助下，我们在组件中使用这些数据。

组件列表

这种使用数据数组呈现组件列表的模式避免了重复，并使用单个元素数据列出了我们的组件。