Javascript React引导基于断点的每行可变列数

目前我有以下代码：

return(
<Container>
    {array.map(function(item, i) {
        if (i%4 == 0) {
            return(
                <Row key={i} xs="3" sm="4">
                {array.slice(i, i+4).map(function(item, i) {
                    return(
                    <Col key={i}>
                        <Card className={"card"}>
                            <Card.Body>
                            <Card.Text>{item.name}</Card.Text>
                            </Card.Body>
                        </Card>
                    </Col>);
                })}
                </Row>
            );
        }
    })}
</Container>);

变成

A B C
D
E F G
H

而不是

A B C
D E F
G H

---

有人能告诉我在哪里或如何修理这个吗？在我通过文档和在线搜索时，我找不到任何具有类似用例的示例（或者可能我没有搜索正确的术语）。任何帮助都会很好，谢谢

之所以会发生这种情况，可能是因为您使用的是

array.slice（i，i+4）

函数一次包含4个元素

你不妨试试：

return(
  <Container>
    <Row key={i} xs="3" sm="4">
      {array.map(function(item, i) {
        return(
          <Col key={i}>
              <Card className={"card"}>
                  <Card.Body>
                  <Card.Text>{item.name}</Card.Text>
                  </Card.Body>
              </Card>
          </Col>
        );
        })}
    </Row>
  </Container>);

返回(
{array.map（函数（项，i）{
返回(
{item.name}
);
})}
);

---

希望这能起作用（可能需要更多的操作）。

哦，谢谢！我的印象是，一开始我必须强制每4个项目创建一个新行，我不知道我可以通过渲染一行中的所有COL来实现同样的效果，然后根据断点限制一行中COL的数量，我不知道库能够解释这一点。

return(
  <Container>
    <Row key={i} xs="3" sm="4">
      {array.map(function(item, i) {
        return(
          <Col key={i}>
              <Card className={"card"}>
                  <Card.Body>
                  <Card.Text>{item.name}</Card.Text>
                  </Card.Body>
              </Card>
          </Col>
        );
        })}
    </Row>
  </Container>);