在react中使用json创建带有表头的表

import React, { Component } from 'react';

class Table extends Component {
  state = {
    tableData: [
      { id: 1, name: 'John', age: 25 },
      { id: 2, name: 'Jane', age: 30 },
      { id: 3, name: 'Tom', age: 28 }
    ],
    tableHeaders: ['ID', 'Name', 'Age']
  };

  renderTableHeader() {
    return this.state.tableHeaders.map(header => {
      return <th key={header}>{header}</th>;
    });
  }

  renderTableData() {
    return this.state.tableData.map(row => {
      return (
        <tr key={row.id}>
          {Object.values(row).map((value, index) => {
            return <td key={index}>{value}</td>;
          })}
        </tr>
      );
    });
  }

  render() {
    return (
      <table>
        <thead>
          <tr>{this.renderTableHeader()}</tr>
        </thead>
        <tbody>{this.renderTableData()}</tbody>
      </table>
    );
  }
}

export default Table;