Question

首先让我解释一下我要构建的东西。我正在构建一个组件，该组件将在时间轴上显示椭圆，以表示从API调用获取的日历中的事件。时间轴是一个单行网格，其中的列表示时间块。为了获得椭圆形的形状，我的计划是进行所有跨越一个以上时间段的事件，并根据事件在左侧或右侧应用边界半径。因此，在跨越3个时间块的事件中，左侧将在左侧四舍五入，而侧面则是平坦的，中间将是方形，右侧将在右侧四舍五入。默认情况下，块为正方形。

我知道如何应用所需的样式，但是使它起作用的逻辑使我感到困惑。我将每个时间块放入具有相应ID和CSS类的地图中。我的函数有一个计数器busyTimeBlock，用于计算一行中找到了多少时间块。我有一个数组moreThanOneArray，用于保存要计数的块的ID。

我已经手动解决了两个用例（2和3个时间段），但是不确定如何解决任何数量的问题。

我的函数当前如下所示：

const TimeBlocks = () => {
  const busyTimeBlock = 0;
  const moreThanOneArray = [];
  return busy.map((busy) => {
    if (busy.timeState == "busyTime") {
      busyTimeBlock++
      moreThanOneArray.push(busy.id)
    }
    if (busyTimeBlock == 2) {
      setBusy(busy.id(moreThanOneArray[0]).timeState = "busytimeleft");
      setBusy(busy.id(moreThanOneArray[1]).timeState = "busytimeright");
    }
    if (busyTimeBlock == 3) {
      setBusy(busy.id(moreThanOneArray[0]).timeState = "busytimeleft");
      setBusy(busy.id(moreThanOneArray[1]).timeState = "busytimermiddle");
      setBusy(busy.id(moreThanOneArray[2]).timeState = "busytimeright");
    }
    return <Box key={busy.id} as={busy.timeState}>{busy.timeState}</Box>
  }
}

对象来自状态（挂钩）。

const [busy, setBusy] = useState([{
  id: 1,
  timeState: "freeTime"
}]);

如果有人可以向我展示一种更好的实现方法，我将不胜感激。预先感谢！

如何根据其在数组中的位置将样式从地图应用于React组件

0 个答案: