如何在 ReactJS 中渲染对象数组？
React.js 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它是 MVC 中的“V”。 ReactJS 是一个开源的、基于组件的前端库，只负责应用程序的视图层。它由 Facebook 维护。
在本文中，我们将了解如何在 React 中渲染对象数组。
最初，我们将从学习什么是对象数组开始。
对象数组：它将多个值存储在一个变量中。该对象可以包含现实世界中的任何内容，例如人名、汽车、游戏字符。如果您知道数据在哪里被处理，对象在某些情况下非常容易使用。对象的字符集称为属性。可以使用 DOT(“.”) 表示法和 (“[]”) 表示法来调用对象的属性。
句法：
var object=[
{
"property1":"value1",
"property2":"value2"
}
]现在，让我们创建一个 React 应用程序来学习如何渲染对象数组。
创建反应应用程序：
第 1 步：使用以下命令创建一个 React 应用程序。
npx create-react-app foldername第 2 步：完成后，使用以下命令将目录更改为新创建的应用程序。
cd foldername项目结构：项目应如下所示：
我们将如何渲染一个对象数组？
我们将使用 map函数来访问数组中的每个对象。
JavaScript 中的 map() 方法通过对父数组中存在的每个元素调用特定函数来创建数组。这是一种非变异方法。通常，map() 方法用于遍历数组并在数组的每个元素上调用函数。
句法：
array.map(function(currentValue, index, arr), thisValue)参数：此方法接受两个参数，如上所述，如下所述：
- 函数(currentValue, index, arr)：必填参数，作用于数组的每个元素。它包含三个参数，如下所示：
- currentValue：必填参数，保存当前元素的值。
- index：可选参数，保存当前元素的索引。
- arr：可选参数，保存数组。
- thisValue：它是一个可选参数，用于保存传递给函数的值。
返回值：返回一个新数组，数组元素是回调函数的结果。
示例 1：在此示例中，我们将简单地创建一个包含状态及其首都的对象数组。我们将它们呈现在一个无序列表中。状态为红色和粗体。
Javascript
import React from 'react'
function RenderingArrayOfObjects() {
const data = [
{
"State": "Uttar Pradesh",
"Capital": "Lucknow"
},
{
"State": "Gujarat",
"Capital": "Gandhinagar"
},
{
"State": "Karnataka",
"Capital": "Bengaluru"
},
{
"State": "Punjab",
"Capital": "Chandigarh"
},
{
"State": "Maharashtra",
"Capital": "Mumbai"
}
]
const listItems = data.map(
(element) => {
return (
-
{element.State}
- {element.Capital}
)
}
)
return (
{listItems}
)
}
function App() {
return (
GeeksforGeeks
Rendering Array of Objects
Javascript
import React from 'react';
import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css';
function RenderingArrayOfObjects(){
const data=[
{
"Name":"Nikita",
"Marks":"98",
"Phone":"123"
},
{
"Name":"Pratiksha",
"Marks":"96",
"Phone":"127"
},
{
"Name":"Muskan",
"Marks":"97",
"Phone":"163"
},
{
"Name":"Nishi",
"Marks":"95",
"Phone":"193"
},
{
"Name":"Himanshu",
"Marks":"78",
"Phone":"120"
}
]
const tableRows=data.map(
(element)=>{
return(
{element.Name}
{element.Marks}
{element.Phone}
)
}
)
return(
Name
Marks
Phone
{tableRows}
)
}
function App() {
return (
GeeksforGeeks
Rendering Array of Objects
输出：
示例 2：在此示例中，我们将包含学生分数的对象数组映射到表中。
注意：要运行以下示例，您需要安装 react-bootstrap 和 bootstrap。
npm install react-bootstrap bootstrap@5.1.3 bootstrapJavascript
import React from 'react';
import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css';
function RenderingArrayOfObjects(){
const data=[
{
"Name":"Nikita",
"Marks":"98",
"Phone":"123"
},
{
"Name":"Pratiksha",
"Marks":"96",
"Phone":"127"
},
{
"Name":"Muskan",
"Marks":"97",
"Phone":"163"
},
{
"Name":"Nishi",
"Marks":"95",
"Phone":"193"
},
{
"Name":"Himanshu",
"Marks":"78",
"Phone":"120"
}
]
const tableRows=data.map(
(element)=>{
return(
{element.Name}
{element.Marks}
{element.Phone}
)
}
)
return(
Name
Marks
Phone
{tableRows}
)
}
function App() {
return (
GeeksforGeeks
Rendering Array of Objects
输出：
