React konva在渲染数组时仅将x更改为1个矩形

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个矩形。 通常我想为第一个矩形应用一个值，为其余矩形应用另一个值。 如果数组中的对象索引为1， seat.margin等于1；如果对象索引不等于1， seat.margin等于2。这是它的外观： 结果图像

Answer 1

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

// 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}
    />;
});

Answer 2

因此，当我尝试通过添加边距移动矩形时，它没有用。 因此，设置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}
        />
      ))