如何使用 ReactJS 将数据映射到组件中？

将所有单独的自定义数据片段映射到自定义组件。

例如：而不是用不同的道具一次又一次地编写自定义组件。我将创建一个包含所有道具的数组，并使用 map()函数在单个组件调用中将数组元素映射到自定义组件。

映射是一种数据收集类型，其中数据以键值对的形式存储。存储在映射中的值必须映射到键。 map 是一个 JavaScript函数，可以在任何数组上调用。使用 map函数，我们在一行代码中将数组的每个元素映射到自定义组件。这意味着无需一次又一次地将组件及其道具称为数组元素。

句法：

var array = [1,2,3,4,5]
var PlusOne= array.map((e)=>{
   return (e+1);
 });
 // All array element value will increase by one.   

list.js：以键值对的形式包含一个包含用户名和卷号的数组。

Javascript

const Users=[
  {
    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"
  },
]
export default Users;

Info.js：用户名和卷号作为 Info 组件中的道具。

Javascript

import React from 'react';
 
function Info (props){
  return (
    

      
 
 {props.name} 
 
 
      
 
 {props.rollNo}
 
 
     
 
  )
}
export default Info;

示例：使用 map函数将 list.js 文件中的数据映射到自定义 Info 组件。

App.js：在 App.js 文件中导入用户数组和信息组件。使用 map函数将 User 数组的每个元素映射到 Info 组件。

Javascript

import React from 'react';
import './App.css';
import Users from './list';
import Info from './Info';
 
function App() {
 
  return (
    

     
 Geeks For Geeks 
      
 
 Mapping Data to component in React js. 
 
 
     {Users.map((e)=>{
       return (
       
     );})}
    
  );
}
export default App;

输出 ：

示例 2：不使用 map函数将 list.js 文件中的数据映射到 Info 组件。

App.js 文件：

Javascript

import React from 'react';
import './App.css';
import Users from './list';
import Info from './Info';
 
function App() {
 
  return (
    

     
 Geeks For Geeks 
      
 
 Mapping Data to component in React js. 
 
 
 
       
       
       
       
       
       
       
 
    
  );
}
export default App;

输出：

从上面的两个例子中，我们得到了相同的输出，但是可以观察到通过使用 App.js 文件中的 map函数，将数组数据映射到组件变得更加容易，并且需要更少的代码。