Reactjs makereact引导列md

我正在学习react和react引导。我想制作一个简单的应用程序，例如使用react bootstrap制作一张卡，并用col md=3显示它，这样卡就变成了4合1行，我们可以从YouTube UI中考虑这个例子作为一张卡片。每1行我想要4张像我给的Youtube用户界面图片一样的卡片。我该怎么做

App.js：

import React from "react";
import "./App.css";
import { Container, Row } from "react-bootstrap";
import Col3 from "./components/col3.component";

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      payments: []
    };
  }

  async componentDidMount() {
    const responsePayments = await fetch(
      "https://api.bukalapak.com/v2/products/f3vi.json"
    );
    const paymentJson = await responsePayments.json();
    this.setState({ payments: paymentJson.product.installment });
  }

  render() {
    return (
      <Container>
        <Row>
          <Col3 payments={this.state.payments}/>
          {console.log(this.state.payments)}
        </Row>
      </Container>
    );
  }
}

export default App;

col3.component.jsx：

import React from "react";

import {
  Card,
  Button
} from "react-bootstrap";

const Col3 = props => {
  return (
    <div>
      {props.payments.map(payment => {
        return (
          <Card key={payment.bank_issuer} style={{ width: '18rem' }}>
            <Card.Img variant="top" src={payment.url_logo} />
            <Card.Body>
              <Card.Title>Card Title</Card.Title>
              <Card.Text>
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </Card.Text>
              <Button variant="primary">{payment.bank_issuer}</Button>
            </Card.Body>
          </Card>
        );
      })}
    </div>
  );
};

export default Col3;

注意：我在product.installation对象行157中使用，这样可以获得17个银行样本。

在您直接放置自定义组件的行中

<Row>
    <Col3 payments={this.state.payments}/>
    {console.log(this.state.payments)}
</Row>

---

有关网格的更多信息，请查看

Hi@Mohamad，查看我的解决方案，并告诉我这是否有帮助。感谢使用fragment@ravibagul91的想法

import { Card, Button, Col} from "react-bootstrap";//import Col here


const Col3 = props => {
  return (
    <>  //Use Fragment instead of div
      {props.payments.map(payment => {
        return (
          <Col md={3}>  //Col start
            <Card key={payment.bank_issuer} style={{ width: '18rem' }}>  //You may not need this style now
              <Card.Img variant="top" src={payment.url_logo} />
              <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                  Some quick example text to build on the card title and make up
                  the bulk of the card's content.
                </Card.Text>
                <Button variant="primary">{payment.bank_issuer}</Button>
              </Card.Body>
            </Card>
          </Col> //Col end
        );
      })}
    </>
  );
};