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

Posted 2023-03-23

【中文标题】如何在 react.js 中创建动态网格？

【英文标题】：How to create a dynamic grid in react.js?

【发布时间】：2021-09-20 03:32:45

【问题描述】：

我正在尝试在 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  src="/assets/318x180.svg" />
                        <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;```

【问题讨论】：

您是在映射数组还是决定显示的卡片数量？

请附上您解决问题的尝试，以及哪里出了问题或没有产生您预期的结果。 SO 是获得特定编程问题帮助的好地方，但不是获得免费代码的地方。

@dmikester1 实际上我很困惑我该怎么做

@BrianThompson 我不是想获得免费代码，而是我无法构建逻辑

【参考方案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  src="/assets/318x180.svg" />
                          <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;

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

【参考方案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