JSX breaks ... Цикл по массиву с картой, генерирующей условные элементы JSX

Question

У меня возникают проблемы при попытке создать пользовательский компонент с циклическим массивом, который условно отображает различные элементы.Этот компонент содержит специальные classNames для создания сетки из 3 элементов в строке независимо от количества параметров, передаваемых компоненту.

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

    let optionsLength = this.props.options.length;
    let options = []

    this.props.options.map((option, index) => {
          if (index === 0) {
            options.push(
          <div className="column is-one-third">
          ...
          // other conditionals explained below

Проблема заключается в попытке найти способ, где каждые 3 элемента мне нужнозакройте и откройте родительский <div>.

Я хотел бы закрыть тег </div> и открыть новый столбец div <div className="columns sub">, прежде чем просто добавить элемент.Эта итерация не может быть закрыта в том же условном выражении, так как стили будут нарушены, и есть больше логики, которая зависит от следующих элементов.Но с другой стороны, JSX ломается.

Вот некоторый псевдокод того, чего я хотел бы достичь:

<div classname="columns"> // <-- ideally, rendered with the same element
  <div>...</div> //<-- 1st element
  <div>...</div>// <-- 2nd element
  <div>...</div>// <-- 3rd element, so we add the following 2 lines
</div> <-- 3rd element
<div className="columns"> //<-- 3rd element
<div>...</div> //<-- 4rd element
...
<div>....</div>//<-- last element
</div>// <-- last element

PS Я использую Bulma для генерации сетки столбцов.

Answer 1

Если this.props.options равно [1,2,3,4,5,6,7], я объявляю этот метод для компонента:

    treatArray = arr => {
      let masterArray = []
      // Will a new array of arrays with 3 items
      while (arr.length) masterArray.push(arr.splice(0, 3));

      return (
        <div>
          {masterArray.map(setOf3 => (
            <div classname="columns">
              {setOf3.map(singleCol => (
                <div className="column is-one-third">{singleCol}</div>
              ))}
            </div>
          ))}
        </div>
      );
    };

И затем вызовите эту функцию в вашем render:

render(){
    return(
     //.
     //.
        { this.treatArray(this.props.options) } 
     //.
     //.
    )
}

Вот рабочая коды и коробка .