Javascript 限制每行按钮的数量

我有6个按钮，我想在我的网页上呈现

我正在通过

map（）

JSON文件中的数组对象进行映射

模板（x）{
返回(
)
}
render（）{
返回(
{（this.props.data）.map（（x）=>this.template（x））}
)
}

---

我怎样才能将每一行限制为只有3个按钮，而不是有多少个按钮，直到它被迫转到下一行？我想把JSON文件中的对象数组拆分成两个单独的对象数组，这样我就可以进行两次

map（）

调用了？似乎有一个更好、更简单的解决方案。

将整个数组拆分为块（较小的数组，每个数组仅包含3个元素），并将这些数组推入

数组块（数组数组数组），然后在渲染函数中：

{arrayOfChunks.map(this.templateChunk)}

方法是：

templateChunk(chunk) {
    return (<div className="row">
            chunk.map(this.template)
    </div>)
}

templateChunk（chunk）{
返回(
chunk.map（this.template）
)
}
我的React知识有限，因此我的语法可能已禁用，但这在渲染函数中的作用是返回一个行div数组，每个行div包含3个按钮。我认为一个更简单的解决方案是在css中使用
flex-box
，这将允许您指定行中需要多少元素

render() {
  return this.props.data.reduce((prev, curr, ind, arr) => {
    if (ind + 1 % 3 === 0) {
      prev.push(createRow(arr.splice(ind - 2, ind + 1)));
    }
    return prev;
  }, [])
}

createRow(arr) {
   return (
        <div className="row">
            {arr.map((x) => this.template(x))}
        </div>
    )
}

template(x) {
    return (
        <div>
            <Button bsStyle="primary"></Button>
        </div>
    )
}

render（）{
返回此.props.data.reduce（（上一个、当前、索引、arr）=>{
如果（ind+1%3==0）{
上推（创建行（阵列拼接（ind-2，ind+1））；
}
返回上一个；
}, [])
}
createRow（arr）{
返回(
{arr.map（（x）=>this.template（x））}
)
}
模板（x）{
返回(
)
}
第一个步骤：想想HTML的布局应该是怎样的。你会考虑CSS解决方案吗？你能更具体地说什么是数组的对象吗？你能给我们看一些样品数据吗？
render() {
  return this.props.data.reduce((prev, curr, ind, arr) => {
    if (ind + 1 % 3 === 0) {
      prev.push(createRow(arr.splice(ind - 2, ind + 1)));
    }
    return prev;
  }, [])
}

createRow(arr) {
   return (
        <div className="row">
            {arr.map((x) => this.template(x))}
        </div>
    )
}

template(x) {
    return (
        <div>
            <Button bsStyle="primary"></Button>
        </div>
    )
}