限制每行按钮数

Question

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

我通过map()

在JSON文件中映射数组对象

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

render() {
    return (
        <div className="row">
            {_(this.props.data).map((x) => this.template(x))}
        </div>
    )
}

如何限制每一行只有3个按钮，而不是只需要多少按钮，直到它被迫下到下一行？我想只是将JSON文件中的对象数组拆分为两个独立的对象数组，所以我只能进行两次map()次调用？似乎有一个更好更容易的解决方案。

Answer 1

将整个数组拆分为块（较小的数组，每个数组只包含3个元素）并将这些数组推入arrayOfChunks（数组数组），然后在render函数中：

{arrayOfChunks.map(this.templateChunk)}

和方法：

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

Answer 2

我的React知识有限，所以我的语法可能已关闭，但这在render函数中的作用是返回一个行div的数组，每个div包含3个按钮。我认为更简单的解决方案是将flex-box与您的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>
    )
}