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 прямоугольника. Обычно я хочу применить одно значение для первого прямоугольника и другое значение для остальных прямоугольников.seat.margin равен 1, если индекс объекта в массиве равен 1, и равен 2, если индекс объекта не равен 1. Вот как это выглядит:

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