React-Bootstrap 基於斷點的每行列數可變

Question

目前我有這個代碼：

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>);

給出一些上下文 - 我將可變數量的數據從數據庫中提取到數組中，並將它們顯示為卡片。 我正在使用一個容器將它顯示在一個由x行和y列組成的網格中。 然而，對於比XS斷點較大任何屏幕，我想顯示4項每行，每行4個因此列數。 一旦 xs 斷點被擊中，我想每行顯示3 個項目。 但是，現在的功能並不像我預期的那樣。 考慮以下示例：

A B C D
E F G H

變成

A B C
D
E F G
H

代替

A B C
D E F
G H

誰能建議我在哪里或如何解決這個問題？ 在我搜索文檔和在線時，我找不到任何具有類似用例的示例（或者我可能沒有搜索正確的術語）。 任何幫助都會很棒，謝謝！

Answer 1

這可能是因為您使用的是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>);

希望這會奏效（可能需要更多操作）。