Reservingseatssysteminreact”改写为中文

座位预订系统是一个常见的应用程序，开发者们通常尝试使用React来实现它。下面是一些可以用React开发的座位预订系统的示例：

1. 基本的座位预订

这是一个基本的座位预订系统，通过单侧数据流的方式管理座位列表和所选座位。当座位被预订时，对应的座位按钮会相应地更新成“已预订”。以下是该应用程序的代码示例：

import React, { useState } from 'react';

function SeatBooking() {
  const [seats, setSeats] = useState([
    { id: 1, name: 'A1', isReserved: false },
    { id: 2, name: 'A2', isReserved: false },
    { id: 3, name: 'A3', isReserved: false },
    { id: 4, name: 'A4', isReserved: false },
    { id: 5, name: 'A5', isReserved: false },
    { id: 6, name: 'A6', isReserved: false },
    { id: 7, name: 'A7', isReserved: false },
    { id: 8, name: 'A8', isReserved: false },
  ]);

  const handleSeatClick = (seat) => {
    const newSeats = [...seats];
    const index = newSeats.indexOf(seat);
    newSeats[index] = { ...seat, isReserved: !seat.isReserved };
    setSeats(newSeats);
  }

  return (
    <div className="seat-booking">
      <h2>选择你的座位</h2>
      <div className="seat-list">
        {seats.map(seat => (
          <button
            key={seat.id}
            onClick={() => handleSeatClick(seat)}
            disabled={seat.isReserved}
            className={seat.isReserved ? 'reserved' : ''}
          >
            {seat.name}
          </button>
        ))}
      </div