如何在 ReactJS 中创建表？

在本文中，我们将在 React.js 中创建一个简单的表，就像在普通 HTML 项目中创建一样。此外，我们将使用普通的 CSS 对其进行样式设置。

先决条件：该项目的先决条件是：

反应
功能组件
JavaScript ES6
HTML 表格和 CSS

创建一个 React 应用程序：

第 1 步：通过在终端中键入以下命令来创建一个反应应用程序。

npx create-react-app react-table

第 2 步：现在，通过运行以下命令转到项目文件夹，即react-table 。

cd react-table

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

示例 1：这里 App.js 是默认组件。首先，我们将了解如何使用硬编码值创建表。稍后我们将看到如何从表中的数组动态呈现数据。

文件名：App.js

Javascript

import './App.css';
  
function App() {
  return (
    
      
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
        
          
          
          
        
      Name Age Gender
Anom 19 Male
Megha 19 Female
Subham 25 Male
    
  );
}
  
export default App;

Name	Age	Gender
Anom	19	Male
Megha	19	Female
Subham	25	Male

Javascript

import './App.css';
  
// Example of a data array that
// you might receive from an API
const data = [
  { name: "Anom", age: 19, gender: "Male" },
  { name: "Megha", age: 19, gender: "Female" },
  { name: "Subham", age: 25, gender: "Male"},
]
  
function App() {
  return (
    
      
        
          
          
          
        
        {data.map((val, key) => {
          return (
            
              
              
              
            
          )
        })}
      Name Age Gender
{val.name} {val.age} {val.gender}
    
  );
}
  
export default App;

Name	Age	Gender
{val.name}	{val.age}	{val.gender}

CSS

.App {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
table {
  border: 2px solid forestgreen;
  width: 800px;
  height: 200px;
}
  
th {
  border-bottom: 1px solid black;
}
  
td {
  text-align: center;
}

在上面的示例中，我们只是简单地使用了 HTML 表格元素，即

、、

和

元素。

示例 2：现在让我们看看如何动态呈现数组中的数据。我们可以简单地使用内置的 Array.map() 方法，而不是使用循环手动迭代数组。 Array.map() 方法允许您遍历数组并使用回调函数修改其元素。然后将在数组的每个元素上执行回调函数。在这种情况下，我们将只在每次迭代时返回一个表行。

文件名：App.js

Javascript

import './App.css';
  
// Example of a data array that
// you might receive from an API
const data = [
  { name: "Anom", age: 19, gender: "Male" },
  { name: "Megha", age: 19, gender: "Female" },
  { name: "Subham", age: 25, gender: "Male"},
]
  
function App() {
  return (
    
      
        
          
          
          
        
        {data.map((val, key) => {
          return (
            
              
              
              
            
          )
        })}
      Name Age Gender
{val.name} {val.age} {val.gender}
    
  );
}
  
export default App;

文件名：App.css现在，让我们编辑名为App.css的文件来设置表格的样式。

CSS

.App {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
table {
  border: 2px solid forestgreen;
  width: 800px;
  height: 200px;
}
  
th {
  border-bottom: 1px solid black;
}
  
td {
  text-align: center;
}

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

npm start

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