如果我有超过三张卡,我如何在 reactstrap 或 bootstrap 中为第四张卡创建一个新行?
Posted
技术标签:
【中文标题】如果我有超过三张卡,我如何在 reactstrap 或 bootstrap 中为第四张卡创建一个新行?【英文标题】:if I have more than three cards, how can i create a new row for the 4th card in reactstrap or bootstrap? 【发布时间】:2021-08-29 02:53:39 【问题描述】:我是 javascript 的新手并做出反应。我需要一种自动将卡片排列在新行中的方法。每行三张卡片,如果我有超过三张,为第四张卡片创建一个新行。我找到了答案,但我无法将这种方式转换为我的项目。 我是自学成才,这是我的第一个项目实践。
我的代码:
this.props.products.map((product) => (
<Row>
<CardGroup>
<Card>
<CardImg
top
src=`$process.env.PUBLIC_URL/assets/images/1.jpg`
/>
<CardBody>
<CardTitle tag="h5">product.productName</CardTitle>
<CardSubtitle tag="h6" className="mb-4 text-muted">
author
</CardSubtitle>
<CardText>casdadasdx</CardText>
</CardBody>
</Card>
</CardGroup>
</Row>
));
答案:您可以创建一个包含 3 张卡片组的数组,然后对其进行迭代: 答案代码:
const arr = var x = arr.reduce((item, key, index) => (index % 3 == 0 ? item.push([key]) : item[item.length-1].push(key)) && item, []);
const Items = (items) => (
<>
<container>
arr.map(group => (
<row>
<CardGroup>
group.map(card => (
<Card style= width: '18rem' >
<Card.Body>
<Card.Title>item.NOME</Card.Title>
<Card.Subtitle className="mb-2 text-muted">item.CATEGORIA</Card.Subtitle>
<Card.Text>item.DESCRICAO</Card.Text>
<Card.Link href="#">Card Link</Card.Link>
<Card.Link href="#">Another Link</Card.Link>
</Card.Body>
</Card>
))
</CardGroup>
</row>
))
</container>
</>
);
【问题讨论】:
嘿,这不是逻辑问题——你应该在 css 中处理它——尤其是在 flex 中。 CSS Trucks 有一篇关于 Flexbox 的精彩文章。这包含您需要了解的所有布局。 【参考方案1】:这是你需要的吗?
import "./styles.css";
import Row, Col, Card, CardHeader, CardBody from "reactstrap";
export default function App()
return (
<div className="App">
<Row>
Array.from(Array(7)).map((item, index) =>
return (
<Col md=4 lg=4 sm=4 xs=12 key=index>
<Card>
<CardHeader>Header index + 1</CardHeader>
<CardBody>Body index + 1</CardBody>
</Card>
</Col>
);
)
</Row>
</div>
);
这是完整的工作示例https://codesandbox.io/s/romantic-thunder-drchc?file=/src/App.tsx
【讨论】:
谢谢,没关系。如何从我的 db.json 文件中获取卡片标题、标题等? @codingmonster 我不明白你的意思。你能解释一下吗? 我在 localhost:3000 上有一个这样的 api: "id": 1, "categoryId": 2, "productName": "Chai", "quantityPerUnit": "48 - 6 oz jars", "unitPrice": "24", "unitsInStock": 53 ,我在 app.js 组件上异步编写了 getProducts 函数; getProducts = () => fetch("localhost:3000/products") .then((response) => response.json()) .then((data) => this.setState( products: data )); ;但是当我在 cardBody cardTitle 等中提到时,我无法从我的 api 获取数据 @codingmonster 我认为这与您最初的问题不同。您可以根据上面的评论打开新问题。如果它回答了这个问题,请接受我的回答。 @codingmonster 请打开新问题并在此处发布链接。我会尽力帮忙的。以上是关于如果我有超过三张卡,我如何在 reactstrap 或 bootstrap 中为第四张卡创建一个新行?的主要内容,如果未能解决你的问题,请参考以下文章