javascript - 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

问题是试图找到一种方法，我需要关闭和打开父级的每 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) } 
     //.
     //.
    )
}

这是一个有效的 codesandbox .