如何使用React JS在每一行上呈现第n列？

import React, { Component } from 'react';

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        // 表格数据
        { name: 'John', age: 30, city: 'New York' },
        { name: 'Alice', age: 25, city: 'San Francisco' },
        { name: 'Bob', age: 35, city: 'Chicago' }
      ]
    };
  }

  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
          </tr>
        </thead>
        <tbody>
          {this.state.data.map((row, index) => (
            <TableRow key={index} rowData={row} />
          ))}
        </tbody>
      </table>
    );
  }
}

class TableRow extends Component {
  render() {
    const { rowData } = this.props;
    return (
      <tr>
        {Object.values(rowData).map((value, index) => (
          <TableColumn key={index} data={value} />
        ))}
      </tr>
    );
  }
}

class TableColumn extends Component {
  render() {
    const { data } = this.props;
    return <td>{data}</td>;
  }
}

export default Table;