如何在 react.js 中创建动态网格？

Question

我正在尝试在 react.js 中创建一个响应式网格系统 我想连续显示 3 张卡片。每张卡片由 4 列组成。 但我只想制作 1 个组件来渲染我的卡片并在屏幕上显示它们。但我无法制定动态显示这些卡片的逻辑，因为一行只包含 3 张卡片。之后下一行将开始 这是我的卡片组件代码

import {
    Card, CardImg, CardText, CardBody,
    CardTitle, CardSubtitle, Button, Container, Row, Col
} from 'reactstrap';

const INNERCARD = (props) => {
    return (
        <Container>
            <Row>
                <Col md={3}>
                    <Card>
                        <CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap"/>
                        <CardBody>
                            <CardTitle tag="h5">Card title</CardTitle>
                            <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
                            <CardText>Some quick example text to build on the card title and make up the bulk of the
                                card's
                                content.</CardText>
                            <Button>Button</Button>
                        </CardBody>
                    </Card>
                </Col>
            </Row>
        </Container>
    );
};

export default INNERCARD;```

Answer 1

我通过一些小修修补补来完成这项工作。以前从未使用过 reactstrap，所以玩一下它很有趣。首先，您还需要将引导程序安装到您的项目中，不确定您是否知道。然后你需要在你的 index.js 文件中包含 bootstrap css 文件。

所以我使用的是新安装的 CRA 应用。我的 index.js 的顶部看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

因此，一旦您安装并导入了 Bootstrap，您就可以使用 reactstrap，假设它也已安装。我从文档中了解到，如果您想要每行 3 张卡片，您需要 <Row xs={3}>。

所以这是我的完整 App.js 文件，它适用于任意数量的卡片，每行显示 3 个：

import './App.css';
import {
  Card, CardImg, CardText, CardBody,
  CardTitle, CardSubtitle, Button, Container, Row, Col
} from 'reactstrap';

function App() {

  // obviously I am just hard-coding in a random number here.  This is where
  // you would have a call to an API or something where you would get all
  // your card data from, ideally that API call would return an array of data
  // and then you could just map over that array to output the card data
  // down below in the render section
  const numberOfCards = 11;

  return (
    <div className="App">
         <Container>
            <Row xs={3}>
            {[...Array(numberOfCards)].map((e, i) => {
                return (
                  <Col>
                      <Card>
                          <CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap"/>
                          <CardBody>
                              <CardTitle tag="h5">Card title #{i+1}</CardTitle>
                              <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
                              <CardText>Some quick example text to build on the card title and make up the bulk of the
                                  card's
                                  content.</CardText>
                              <Button>Button</Button>
                          </CardBody>
                      </Card>
                  </Col>
                )
            })}
            </Row>
        </Container>
    </div>
  );
}

export default App;

忘了包括它的样子！这里是！

Answer 2

//映射引导卡，然后在网格格式中显示它们

import React from 'react'

import { Col, Container, Row } from 'react-bootstrap';
// Array of Data 
const StudentData = [
    {
        Name: "Waji",
        Degree: "Bachlorrs"
    },
    {
        Name: "Zain",
        Degree: "Matric"
    },
    {
        Name: "Rahat",
        Degree: "B.Com"
    },
    {
        Name: "Wajahat",
        Degree: "Bachlorrs"
    },
    {
        Name: "Sabi",
        Degree: "Bachlorrs"
    }

]

let NewCard = () => {
    return (
        <Row>
            {StudentData.map((props) => {
                return ( 
                    <Col sm={6} md={4} className='mt-3'>
                        <div className="card" style={{ width: '18rem' }}>
                            <div className="card-body">
                                <h5 className="h5">{props.Name}</h5>
                                <p className="card-text">{props.Degree}</p>
                                <a href="/" className="btn btn-primary">Click</a>
                            </div>
                        </div>
                    </Col>
                )
            })}
        </Row>
    )
}

export default function MyCard() {
    return (
        <Container>
            <NewCard
                title=''
                calss=''
            />
        </Container>
    )
}


ReactDOM.render(
    <MyCard />,
document.getElementById('root')
)

dynamic grid image with reactJs Using map function