如何在React表中创建一个可点击的列数据？

npx create-react-app my-app
cd my-app
npm start

import React from 'react';

const Table = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item.id}>
            <td>{item.column1}</td>
            <td>{item.column2}</td>
            <td>
              <button onClick={() => handleClick(item.id)}>点击</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

const handleClick = (id) => {
  // 执行点击事件的操作，比如弹出提示框或者导航到其他页面
  alert(`你点击了ID为${id}的行`);
};

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

const App = () => {
  const data = [
    { id: 1, column1: '数据1', column2: '数据2' },
    { id: 2, column1: '数据3', column2: '数据4' },
    { id: 3, column1: '数据5', column2: '数据6' },
  ];

  return (
    <div>
      <h1>可点击的表格列数据</h1>
      <Table data={data} />
    </div>
  );
};

export default App;