时间戳

首页 > 解决方案 > 制作反应引导列 md

reactjs - 制作反应引导列 md

问题描述

我正在学习反应和反应引导。我想制作一个简单的应用程序，例如卡片（使用 react-bootstrap）并显示它，col md = 3 以便卡片变为 4 in 1 row。来自 youtube 的 UI 可以是示例，我们可以将来自 youtube UI 的示例视为一张卡片。每 1 行我想要 4 张卡片，比如我给的 Youtube UI 图像。我怎样才能做到这一点？

到目前为止我制作的应用程序的图像。

应用程序.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;

注意：我在对象（第 157 行）中使用此 APIproduct.installment ，以便获得 17 个银行样本。

标签： reactjsreact-bootstrap

解决方案

在里面Row你直接把你的自定义组件，

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

并且在给style={{ width: '18rem' }}元素的子组件中不会将其设置为Col.

您实际上需要编写Col.

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
        );
      })}
    </>
  );
};

有关Grid检查文档的更多信息

推荐阅读