时间戳

首页 > 解决方案 > React Bootstrap Cards 和 CardDeck 组件 - 响应式布局

reactjs - React Bootstrap Cards 和 CardDeck 组件 - 响应式布局

问题描述

我正在使用 React Bootstrap 并正在使用 Axios 从 API 中提取数据。我正在尝试在引导卡/CarDeck 组件中显示来自该 API 的数据。我使用下面的代码进行了大部分工作，但布局有问题。

我希望能够让卡片组响应并根据屏幕尺寸每行显示灵活数量的卡片。目前，如果响应中有很多项目，每张卡片都非常薄，无法查看。这样做的正确方法是什么？

import React, { useState, useEffect } from "react";
import CardDeck from "react-bootstrap/CardDeck";
import Card from "react-bootstrap/Card";
import axios from "axios";
import Container from "react-bootstrap/Container";

const CardColumns = () => {
  const [cardInfo, setData] = useState([]);
  console.log(cardInfo);

  useEffect(() => {
    axios
      .get(
        "https://webhooks.mongodb-realm.com/api/client/v2.0/app/cards-fvyrn/service/Cards/incoming_webhook/getAllCards"
      )
      .then((response) => {
        setData(response.data);
        console.log(response.data);
      })
      .catch(function (error) {
        console.log(error);
      });
  }, []);

  const renderCard = (card, index) => {
    return (
      <Card style={{ width: "18rem" }} key={index} className="box">
        <Card.Img variant="top" src="holder.js/100px180" src={card.image} />
        <Card.Body>
          <Card.Title>
            {index} - {card.manufacturer}
          </Card.Title>
          <Card.Text>{card.player}</Card.Text>
        </Card.Body>
      </Card>
    );
  };

  return <CardDeck>{cardInfo.map(renderCard)}</CardDeck>;
};
export default CardColumns;

标签： reactjsbootstrap-4react-bootstrap

解决方案

最后，这是我采用以下方法的解决方案。我认为的关键是：

  1. 将 cardDeck<Container>包裹起来，然后用以下方法包裹卡片<Col className="container-fluid mt-4">：

`

const renderCard = (card, index) => {
return (`
  <Col className="container-fluid mt-4">
    {/* <Card key={index} className="box"> */}
    <Card style={{ width: "18rem" }} key={index} className="box">
      <Card.Header>
        {card.brand} - {card.series}
      </Card.Header>
      <Card.Img variant="top" src={card.front_image} fluid />
      <Card.Body>
        <Card.Title>
          {card.player} (#
          {card.card_number.$numberDouble}) {card.variation}
        </Card.Title>
        {/* <Card.Text className="d-flex">{card.player}</Card.Text> */}
        {/* <Card.Text>{card.player}</Card.Text> */}
      </Card.Body>
      <ListGroup className="list-group-flush">
        <ListGroupItem>
          Print Run - {card.print_run.$numberDouble}
        </ListGroupItem>
        <ListGroupItem>Career Stage - {card.career_stage} </ListGroupItem>
        <ListGroupItem>For Trade - {card.forTrade}</ListGroupItem>
      </ListGroup>
      <Card.Footer className="text-muted">{card.team}</Card.Footer>
    </Card>
  </Col>

  //{/* </Col> */}
);
  };

  return (
<Container>
  <Button variant="primary">Filter By Brand</Button>{" "}
  <Button variant="primary">Filter By Player</Button>{" "}
  <Button variant="primary">Filter By Team</Button>
  <CardDeck>{cardInfo.map(renderCard)}</CardDeck>
</Container>
);`

推荐阅读