Javascript 如何在循环中启动一个组件并在所有3次迭代中关闭它

您好，我在循环中搜索开放标记的解决方案，并在所有3次迭代中关闭它。目标是创建一个基于集装箱行和列的烤架。我的问题是我不知道怎么做

例如：

render（）{
const arrayName=[“约翰”、“鲍勃”、“乔”、“马特”、“托托”、“塔塔”]
设arrayEl=[]；
让计数=1；
for（设i=0；i{name}
）；
计数++；
继续；
}
如果（计数==3）{
arrayEl.push（
{name}
）；
arrayEl.push（）；
计数=1；
继续；
}
}
返回（{arrayEl}）
}

结果是：

厕所
上下快速移动
乔
垫子
托托
塔塔

谢谢你的帮助

编辑

问题是我们不能在不关闭它的情况下添加某个元素或成分

不好：

arrayEl.push（）

这很好：

arrayEl.push（）或arrayEl.push（）

好的，因此您必须更改循环上的逻辑才能得到想要的结果。下面是我用JavaScript制作的示例。您只需要将其与您的组件相适应

const arrayName=[“约翰”、“鲍勃”、“乔”、“马特”、“托托”、“塔塔”]；
设arrayEl=[]；
for（设i=0；i${name}
\n`）；
如果（（（i+1）%3）==0）{
arrayEl.push（`\n`）；
}
}
console.log（`\n${arrayEl.join（''）}`）好的，因此您必须更改循环上的逻辑才能得到您想要的结果。下面是我用JavaScript制作的示例。您只需要将其与您的组件相适应


const arrayName=[“约翰”、“鲍勃”、“乔”、“马特”、“托托”、“塔塔”]；
设arrayEl=[]；
for（设i=0；i${name}
\n`）；
如果（（（i+1）%3）==0）{
arrayEl.push（`\n`）；
}
}
console.log（`\n${arrayEl.join（''）}`）我将从以下位置更改您的数据：

[“约翰”、“鲍勃”、“乔”、“马特”、“托托”、“塔塔”]
//到
约翰、鲍勃、乔、马特、托托、塔塔

比如说

然后可以嵌套2
.map
以在JSX中复制结构：


const chunk = (arr, chunckSize) => arr.reduce((chunks, value, index) => {
  const chunckIndex = Math.floor(index / chunckSize)
  const c = chunks[chunckIndex] || (chunks[chunckIndex] = [])
  c.push(value)
  return chunks
}, [])

render() {
    const arrayName = ["john", "bob", "joe", "mat", "toto", "tata"]

    return (
        <div className="container">
            {chunk(arrayName, 3).map(names => (
                <div className="row">
                    {names.map(name => <div className="col">{name}</div>)}
                </div>
            ))}
        </div>
    )
}


常量块=（arr，chunckSize）=>arr.reduce（（块，值，索引）=>{
const chunckIndex=数学楼层（索引/chunckSize）
常量c=块[chunckIndex]| |（块[chunckIndex]=[]）
c、 推送（值）
返回块
}, [])
render（）{
const arrayName=[“约翰”、“鲍勃”、“乔”、“马特”、“托托”、“塔塔”]
返回(
{chunk（arrayName，3）.map（name=>(
{names.map（name=>{name}）}
))}
)
}
我将从以下位置更改您的数据：

[“约翰”、“鲍勃”、“乔”、“马特”、“托托”、“塔塔”]
//到
约翰、鲍勃、乔、马特、托托、塔塔

比如说

然后可以嵌套2
.map
以在JSX中复制结构：


const chunk = (arr, chunckSize) => arr.reduce((chunks, value, index) => {
  const chunckIndex = Math.floor(index / chunckSize)
  const c = chunks[chunckIndex] || (chunks[chunckIndex] = [])
  c.push(value)
  return chunks
}, [])

render() {
    const arrayName = ["john", "bob", "joe", "mat", "toto", "tata"]

    return (
        <div className="container">
            {chunk(arrayName, 3).map(names => (
                <div className="row">
                    {names.map(name => <div className="col">{name}</div>)}
                </div>
            ))}
        </div>
    )
}


常量块=（arr，chunckSize）=>arr.reduce（（块，值，索引）=>{
const chunckIndex=数学楼层（索引/chunckSize）
常量c=块[chunckIndex]| |（块[chunckIndex]=[]）
c、 推送（值）
返回块
}, [])
render（）{
const arrayName=[“约翰”、“鲍勃”、“乔”、“马特”、“托托”、“塔塔”]
返回(
{chunk（arrayName，3）.map（name=>(
{names.map（name=>{name}）}
))}
)
}
您的方法的问题是
JSX
不是html，因此
表达式无效

出于完整性考虑的命令式方法。：）

顺便说一句，你需要钥匙

render(){
    const arrayName = ["john", "bob", "joe", "mat", "toto", "tata"]
      let arrayEl = [];
      let row = [];
      const batchSize = 3
      for ( let i = 0, i < arrayName.length, i++ ) {
         const name = arrayName[i]
         row.push(<div className="col" key={name}>{name}</div>)

         // we have a full batch or the last element 
         if (row.length === batchSize || i === arrayName.length - 1) { 
           arrayEl.push(<div className="row" key={i/batchSize}>{row}</div>)
           row = []
         }
       }
    return (<div className="container">{arrayEl}</div>)
}

render（）{
const arrayName=[“约翰”、“鲍勃”、“乔”、“马特”、“托托”、“塔塔”]
设arrayEl=[]；
设row=[]；
常量batchSize=3
for（设i=0，i
您的方法的问题是
JSX
不是html，因此
表达式无效

出于完整性考虑的命令式方法。：）

顺便说一句，你需要钥匙

render(){
    const arrayName = ["john", "bob", "joe", "mat", "toto", "tata"]
      let arrayEl = [];
      let row = [];
      const batchSize = 3
      for ( let i = 0, i < arrayName.length, i++ ) {
         const name = arrayName[i]
         row.push(<div className="col" key={name}>{name}</div>)

         // we have a full batch or the last element 
         if (row.length === batchSize || i === arrayName.length - 1) { 
           arrayEl.push(<div className="row" key={i/batchSize}>{row}</div>)
           row = []
         }
       }
    return (<div className="container">{arrayEl}</div>)
}

render（）{
const arrayName=[“约翰”、“鲍勃”、“乔”、“马特”、“托托”、“塔塔”]
设arrayEl=[]；
设row=[]；
常量batchSize=3
for（设i=0，i
您不能在部分中推送HTML元素，例如

arrayEl.push(<div>)

arrayEl.push(</div>)


我没有使用
count
变量，而是使用了循环中的
I
变量，并检查
（I+1）
是否可以除以3:
%3==0
。如果是这样的话，这意味着你已经有3列在你的行列；我们可以将
currentCols
推送到
行
数组并清空它。
您不能将HTML元素按部分推送，例如

arrayEl.push(<div>)

arrayEl.push(</div>)


我没有使用
count
变量，而是使用
I
var
render() {
    const arrayName = ["john", "bob", "joe", "mat", "toto", "tata"];
    let rows = [];
    let currentCols = [];

    for (let i = 0; i < arrayName.length; i++) {
        let name = arrayName[i];
        currentCols.push(<div className="col" key={i}>{name}</div>);

        if ((i+1) % 3 === 0) {
          rows.push(<div className="row" key={i}>{currentCols}</div>);
          currentCols = [];                
        }
    }

    rows.push(currentCols);
    return (<div className="container">{rows}</div>)
}