在react表中显示数据

import React, { Component } from 'react';

class DataTable extends Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {/* 数据行 */}
        </tbody>
      </table>
    );
  }
}

export default DataTable;

import React, { Component } from 'react';

class DataTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: 'John Doe', email: 'john@example.com' },
        { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
        { id: 3, name: 'Bob Johnson', email: 'bob@example.com' },
      ],
    };
  }

  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          {this.state.data.map((item) => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.email}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default DataTable;

import React, { Component } from 'react';
import DataTable from './DataTable';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Data Table</h1>
        <DataTable />
      </div>
    );
  }
}

export default App;