React 中的座位计划生成器

Question

我正在寻找一个座位计划生成器添加到我的网站。我的座位信息需要作为一个对象出现。我想据此呈现座位图。是否可以渲染如下所示的内容？

我也尝试过反应座位选择器。但座位之间的空间没有被占用

Answer 1

问题出在我的 CSS 文件中，注释空白属性将修复该错误。

div.seat {
    background-color: green;
  }
  
  div.seat--reserved {
    background-color: rgb(209, 7, 7);
  }
  
  div.seat--selected {
    background-color: blue;
  }
  
  .seat-picker {
    margin: auto;
  }
  
  .seat-picker__row {
  }
  
  .seat-picker__row__number {
  }
  
  /* div.blank {
    display: none;
  } */

Answer 2

对于 2024 年到来的任何人，也可以尝试一下这个库 - https://www.npmjs.com/package/@mezh-hq/react-seat-toolkit

它肯定能解决这个问题以及更多问题