javascript - React konva 在渲染数组时仅对 1 个矩形应用 x 变化

Question

我有一个这样的对象数组：{ id, width, height, margin }. 当我渲染该数组并将该信息应用到像这样反应 konva Rect 组件时：

{
      topSide.map((seat, index) => (
        <Rect
          id={seat.id}
          key={seat.id}
          fill="brown"
          stroke="white"
          width={seat.width}
          height={seat.height}
          x={topSideStartPosition + index * seat.width + seat.margin}
          y={y * linesHeight - seat.height - 2}
        />
      ))
}

所以我的问题是seat.margin仅适用于 1 个矩形。通常我想为第一个矩形应用一个值，为其余矩形应用另一个值。seat.margin如果数组中的对象索引为 1，则等于 1；如果对象索引不等于 1，则等于 2。它的外观如下： 结果图像

Answer 1

因此，当我尝试通过添加边距来移动矩形时，它不起作用。所以设置offsetX和删除seat.margin，在这种情况下帮助了我。

回答我的问题：

topSide.map((seat, index) => (
        <Rect
          id={seat.id}
          key={seat.id}
          fill="brown"
          width={seat.width}
          height={seat.height}
          offsetX={-2 * index}
          x={topSideStartPosition + index * seat.width}
          y={y * linesHeight - seat.height - 2}
        />
      ))

Answer 2

我认为您可能需要计算每个座位的偏移量，并使用以前的偏移量来计算下一个座位的新偏移量。

// somewhere in the top of render function
// probably need to adjust for the first seat
let offset = 0; 

// in component:
topSide.map((seat, index) => {
    if (index === 1) {
       offset += seat.width + seat.margin
    } else {
       offset += seat.width
    }
    return <Rect
      id={seat.id}
      key={seat.id}
      fill="brown"
      stroke="white"
      width={seat.width}
      height={seat.height}
      x={offset}
      y={y * linesHeight - seat.height - 2}
    />;
});