Javascript react.js每第n项添加开始标记或结束标记

由于react/jsx不允许将非结束标记添加到数组/子组件中，因此我在使用此逻辑时遇到了问题。例如，对于引导css，我希望每4列添加一行

因此，逻辑如下：

添加一个开头行ex:

，然后在此行内循环，每个循环附加一列ex:

render（）{
const rows=array\u chunk（this.props.columns，4）
返回(
{
rows.map（（row）=>(
{
行映射（（列）=>(
{col}
))
}
))
}
)
}

示例数组_块（我建议您使用lodash）

module.exports=函数块（arr，大小）{
如果（！Array.isArray（arr））{
抛出新类型错误（'输入应为数组'）；
}
如果（大小类型！=='number'）{
抛出新的TypeError（'大小应该是一个数字'）；
}
var结果=[]；
对于（变量i=0；i
实际上，我只是使用了数组并对渲染进行了精细处理

render() {
    let rows = [],
        cols = []
    let index = 0
    const totalCols = 20;

    for (index; index < totalCols; index++) {
        cols.push(<div class="col" key={index}/>)
        if ((index + 1) % 4 == 0) {
            rows.push(
                <div class="row" key={index}>
                    {cols}
                </div>
            )
            cols = []
        }
    }
    return (
        <div class="container">
            {rows}
        </div>
    )
}

render（）{
设行=[]，
cols=[]
设指数=0
常数totalCols=20；
用于（索引；索引
>适用于任何其他语言JSX不是字符串连接语言。它将被传输到实际的JS代码中，这样你的代码就不会工作了。那么，用React/JSX处理这个逻辑的正确方法是什么呢？你能用你想要生成的HTML标记更新你的问题吗？Updated@NguyễnĐăngKhoaRows应该是一个包含列组件的组件。它如何处理9列？如果大小为2（2块/4），您将丢失第9项…它将创建第一行4列，第二行3列。数组块就是这样工作的。@AntonB映射两次是O（2n）==O（n）；为每个n映射一个完整的集合可能是O（n^2）。但是根据我使用React.js的经验。这是解决这个问题的唯一方法。@Mathletics很好的观点，我被纠正了-谢谢你的回答：）
<div class="row">
  <div class="column">
   Some data
  </div>
  <div class="column">
   Some more data
  </div>
  <div class="column">
   Other data
  </div>
  <div class="column">
   Something else
  </div>
</div>
<div class="row">
  <div class="column">
   Some data
  </div>
  <div class="column">
   Some more data
  </div>
  <div class="column">
   Other data
  </div>
  <div class="column">
   Something else
  </div>
</div>

render() {
   const rows = array_chunk(this.props.columns, 4)
   return (
     {
       rows.map((row) => (
         <div className="row">
         {
           row.map((col) => (
             <div className="col">{ col }</div>
           ))
         }
         </div>
       ))
     }
   )
}

module.exports = function chunks(arr, size) {
  if (!Array.isArray(arr)) {
    throw new TypeError('Input should be Array');
  }

  if (typeof size !== 'number') {
    throw new TypeError('Size should be a Number');
  }

  var result = [];
  for (var i = 0; i < arr.length; i += size) {
    result.push(arr.slice(i, size + i));
  }

  return result;
};

render() {
    let rows = [],
        cols = []
    let index = 0
    const totalCols = 20;

    for (index; index < totalCols; index++) {
        cols.push(<div class="col" key={index}/>)
        if ((index + 1) % 4 == 0) {
            rows.push(
                <div class="row" key={index}>
                    {cols}
                </div>
            )
            cols = []
        }
    }
    return (
        <div class="container">
            {rows}
        </div>
    )
}