管理react js表中单个行的状态

import React, { useState } from 'react';

const TableRow = () => {
  const [status, setStatus] = useState('active');

  const handleStatusChange = () => {
    setStatus(status === 'active' ? 'inactive' : 'active');
  };

  return (
    <tr>
      <td>Row data</td>
      <td>{status}</td>
      <td>
        <button onClick={handleStatusChange}>Toggle Status</button>
      </td>
    </tr>
  );
};

const Table = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <TableRow />
        <TableRow />
        <TableRow />
      </tbody>
    </table>
  );
};

export default Table;