在React中创建具有可滚动行和可单击元素的表

import React, { Component } from 'react';

class ScrollableTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' },
        { id: 3, name: 'Bob' }
      ],
      selectedRow: null
    };
  }

  handleClick(row) {
    this.setState({ selectedRow: row.id });
  }

  render() {
    const { data, selectedRow } = this.state;

    return (
      <table className="scrollable-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {data.map(row => (
            <tr
              key={row.id}
              className={selectedRow === row.id ? 'selected' : ''}
              onClick={() => this.handleClick(row)}
            >
              <td>{row.id}</td>
              <td>{row.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default ScrollableTable;