如何使用数组中的 ReactJS 构建 HTML 表格？

如果我们有一个数组并想使用 ReactJS 构建它的 HTML 表，我们可以使用 map函数。 map() 方法遍历数组的每个元素并将其转换为表格行。首先，我们将创建一个表格标记，然后首先，我们将遍历表格的标题/列名，并使用标记将它们转换为表格标题。然后我们将遍历表数据并使用标签将它们转换为每一行作为表体。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```

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

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React, { Component } from 'react';
  
class App extends Component {
    render() {
        var heading = ['Name', 'City', 'Course'];
        var body =
            [['Kapil', 'Jaipur', 'MCA'],
            ['Aakash', 'Hisar', 'Btech'],
            ['Mani', 'Ranchi', 'MSc'],
            ['Yash', 'Udaipur', 'Mtech']
            ];
        return (
            
                ,
            
        );
    }
}
  
class Table extends Component {
    render() {
        var heading = this.props.heading;
        var body = this.props.body;
        return (
            
                
                    
                        {heading.map(head => )}
                    
                
                
                    {body.map(row => )}
                
            {head}

        );
    }
}
  
class TableRow extends Component {
    render() {
        var row = this.props.row;
        return (
            
                {row.map(val => {val})}
            
        )
    }
}
  
export default App;

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

npm start

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

正如我们从输出中看到的那样，我们使用标记作为标题，使用标记作为其余行。 map函数遍历每一行并返回一行，并将其添加到表中。