JSX 中斷......使用映射生成條件 JSX 元素循環遍歷數組

Question

我在嘗試使用循環數組構建自定義組件時遇到問題，該數組有條件地呈現不同的元素。 該組件包含特殊的類名，用於生成每行 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

問題是試圖找到一種方法，我需要關閉和打開父<div>每 3 個元素。

我想關閉</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) } 
     //.
     //.
    )
}

這是一個有效的代碼和框。