React konva применяет изменение x только для 1 прямоугольника при рендеринге массива

Question

У меня есть массив объектов, подобный этому: { id, width, height, margin }.И когда я отрисовываю этот массив и применяю эту информацию к реагирует на компонент 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 применяет только один прямоугольник.Обычно я хочу применить одно значение для первого прямоугольника и другое значение для остальных прямоугольников.seat.margin равно 1, если индекс объекта в массиве равен 1, и равно 2, если индекс объекта не равен 1. Вот как это выглядит: изображение результата

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