在ReactJs中将对象数组的属性打印为网格

import React from 'react';

class Grid extends React.Component {
  render() {
    const data = this.props.data; // 对象数组数据源

    // 生成表头
    const headers = Object.keys(data[0]).map((key, index) => (
      <th key={index}>{key}</th>
    ));

    // 生成表格行
    const rows = data.map((item, index) => (
      <tr key={index}>
        {Object.values(item).map((value, index) => (
          <td key={index}>{value}</td>
        ))}
      </tr>
    ));

    // 渲染表格
    return (
      <table>
        <thead>
          <tr>{headers}</tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
  }
}

export default Grid;

import React from 'react';
import Grid from './Grid';

class App extends React.Component {
  render() {
    const data = [
      { name: 'John', age: 25, city: 'New York' },
      { name: 'Alice', age: 30, city: 'London' },
      { name: 'Bob', age: 35, city: 'Paris' },
    ];

    return (
      <div>
        <h1>Object Array Grid</h1>
        <Grid data={data} />
      </div>
    );
  }
}

export default App;