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

Question

您好，我在循环中搜索开放标记的解决方案，并将其全部关闭 3 次迭代。目标是创建一个基于容器行和列的烤架。我的问题是我不知道该怎么办。

示例:

    render(){
        const arrayName = ["john", "bob", "joe", "mat", "toto", "tata"]
        let arrayEl = [];
        let count = 1; 
          for ( let i = 0; i < arrayName.length; i++ ) {
             let name = arrayName[i]

             if (count === 1) {
                 arrayEl.push(<div className="row">);
                 arrayEl.push(<p className="col">{name}</p>);
                 count ++;
                 continue;
             }
             if (count === 3) {
                 arrayEl.push(<p className="col" >{name}</p>);
                 arrayEl.push(</div>);
                 count = 1;
                 continue;
             }
           }
        return (<div className="container">{arrayEl}</div>)
    }

想要的结果是:

<div className="container">
    <div className="row">
        <div className="col">john</div>
        <div className="col">bob</div>
        <div className="col">joe</div>
    </div>
    <div className="row">
        <div className="col">mat</div>
        <div className="col">toto</div>
        <div className="col">tata</div>
    </div>
</div>

感谢您的帮助

编辑

问题是我们无法在不关闭某人元素或组件的情况下添加它。

很糟糕:

arrayEl.push(<div className="row">)

很好:

arrayEl.push(<div className="row"/>) or arrayEl.push(<div className="row"></div>)

Answer 1

我会更改您的数据:

 ["john", "bob", "joe", "mat", "toto", "tata"]
// to
 [["john", "bob", "joe"], ["mat", "toto", "tata"]]

Checkout https://lodash.com/docs/4.17.11#chunk for example of that

然后你可以嵌套 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>
    )
}