每三列创建一个新行

Question

我正在尝试创建一个虚拟商店，我想让每一行产品在大屏幕上有四个项目，三个在中，两个在气味上。

我的问题是我无法想出一种方法来使每四个项目迭代一次项目列表就会创建一个新行。（我从使用 Flask 创建的 API 获取数据，获取数据部分有效。）

这是我的代码：

import React, { useState, useEffect } from "react";
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';


function ShopItems () {
    const [items, setItems] = useState([]);

    useEffect(() => {
        fetch('/api/items').then(res => res.json()).then(data => {
            setItems(data.items);
        });
    }, []);

    return(
        <Container fluid>
            <Row xs={6} md={4} lg={3}>
            {
                items.map((item) => (
                    <Col key={item.id}>{item.name}</Col>))
            }
            </Row>
        </Container>
    )
}

export default ShopItems;

Answer 1

您使用的道具不正确。

<Container fluid>
  <Row>
    <Col xs={6} md={4} lg={3}></Col>
  </Row>
</Container>

每三列创建一个新行

Create a new row every three columns

javascript

twitter-bootstrap

reactjs

react-bootstrap