如何在选中时隐藏表视图中的行

import React, { useState } from 'react';

const TableView = () => {
  const [hiddenRows, setHiddenRows] = useState([]);

  const handleRowClick = (rowId) => {
    if (hiddenRows.includes(rowId)) {
      setHiddenRows(hiddenRows.filter(id => id !== rowId));
    } else {
      setHiddenRows([...hiddenRows, rowId]);
    }
  };

  return (
    <table>
      <tbody>
        <tr onClick={() => handleRowClick(1)} style={{ display: hiddenRows.includes(1) ? 'none' : 'table-row' }}>
          <td>Row 1</td>
        </tr>
        <tr onClick={() => handleRowClick(2)} style={{ display: hiddenRows.includes(2) ? 'none' : 'table-row' }}>
          <td>Row 2</td>
        </tr>
        <tr onClick={() => handleRowClick(3)} style={{ display: hiddenRows.includes(3) ? 'none' : 'table-row' }}>
          <td>Row 3</td>
        </tr>
      </tbody>
    </table>
  );
};

export default TableView;