Как мне сопоставить каждые два элемента для реакции? - PullRequest
Новая
       144

Как мне сопоставить каждые два элемента для реакции?

0 голосов
/ 13 июля 2020

Допустим, у меня есть массив, который выглядит следующим образом: 

const array = [0, 1, 2, 3, 4, 5, 6, 7]

Я пытаюсь выполнить итерацию для каждых 2 объектов в функции .map, но он должен выглядеть примерно так: это в моем рендере (обратите внимание, что я использую React Bootstrap): 

<Row>
<Col>array[0]</Col>
<Col>array[1]</Col>
</Row>


<Row>
<Col>array[2]</Col>
<Col>array[3]</Col>
</Row>

et c ...

Итак, для каждых 2 объектов он должен иметь собственная строка, а затем визуализируйте эти 2 объекта перед закрытием строки и началом новой строки, если в ней больше элементов.

Как лучше всего этого добиться?

1 Ответ

1 голос
/ 13 июля 2020

короткий ответ

Преобразовать модель, затем вставить в представление.

Подробный ответ

Вам необходимо преобразовать ваш массив в матрицу в соответствии с вашими потребностями: 

const array = [0, 1, 2, 3, 4, 5, 6, 7]

const rows = array.reduce(function (rows, key, index) { 
    return (index % 2 == 0 ? rows.push([key]) 
      : rows[rows.length-1].push(key)) && rows;
  }, []);
  
console.log(rows)

Теперь ваша модель преобразована в этот формат

[ [0, 1] , [2, 3] , [4, 5] , [6, 7] ]

Теперь вложенный l oop должен выполнять работа с элегантностью: 

rows.map(row => ( 
  <Row >
  { row.map(col => (<Col>{col}</Col>)) }
  </Row>
))

ПРИМЕЧАНИЯ:

Инженерия, лежащая в основе этого элегантного решения, состоит в том, чтобы подготовить вашу модель, а затем вы oop.

Не уверен, если React по-прежнему требует id в (.eg: <Compo id="">), когда компоненты отображаются в l oop ..

...