Как выполнить итерацию по двум массивам и получить уникальные координаты y

Question

Контекст: в Sketch я пишу плагин для отображения текста на холсте, который отображает вертикальный список текста и его комбинации размера шрифта + веса.

[Использует JavaSCript [

Проблема: я не могу понять, как программно увеличить Y pos каждого слоя должным образом.

Скажем, у меня есть два массива:

const fontWeights = ['normal', 'bold'];
const fontSizes = ['small', 'medium', 'large'];

Я хочу создать вертикальный список каждая комбинация fontWeight + fontSize, так что это выглядит так:

smallNormal
smallBold
mediumNormal
mediumBold
largeNormal
largeBold

(или графически см. изображение )

function renderLayers() {
   return fontWeights.map((weight, weightsIndex) => 
       fontSizes.map((size, sizeIndex) => 
           return (
               <TextLayer 
                   fontSize={size} 
                   fontWeight={weight} 
                   yPos={ (weightsIndex + sizeIndex) * 100 } 
               />
}

Это вроде работает, кроме это случай, когда:

0 + 0 * 100 = 0
0 + 1 * 100 = 100
1 + 0 * 100 = 100 // <-- that should be 200

Все, что я действительно хочу сделать, это сместить каждую итерацию на фиксированную величину. Я уверен, что есть некоторый логический c / математический способ сделать это, но я застрял.

Помощь была бы отличной, спасибо!

Answer 1

Вы можете просто сохранить внешнюю переменную для хранения yPos:

function renderLayers() {
  let y = 0;
  return fontWeights.map((weight) =>
    fontSizes.map((size) => {
      y = y + 100;
      return <TextLayer fontSize={size} fontWeight={weight} yPos={y} />;
    })
  );
}

Индекс карты может быть не лучшим для этой работы, поскольку он чередуется между 0 и длиной массива - 1, поэтому это действительно не то, что вы хотите. Вам нужна некоторая переменная снаружи карт, которая может хранить «счет» обеих итераций вместе взятых.

Я добавил новую строку, но вы также можете просто сделать:

return <TextLayer fontSize={size} fontWeight={weight} yPos={y += 100} />;