javascript - 如何使用 React Bootstrap 和网格水平显示 3 个卡片组件？

Question

数据库.json

{
  "products": [
    {
      "id": 1,
      "name": "Moto G5",
      "quantity": 2,
      "price": 13000
    },
    {
      "id": 2,
      "name": "Racold Geyser",
      "quantity": 3,
      "price": 6000
    },
    {
      "id": 3,
      "name": "Dell Inspiron",
      "quantity": 4,
      "price": 50000
    },
    {
      "id": 4,
      "name": "Epson Printer",
      "quantity": 1,
      "price": 9500
    },
    {
      "name": "Lenovo G50",
      "quantity": 2,
      "price": 50000,
      "id": 5
    }
  ]
}

App.js

import React from 'react';
import {BrowserRouter as Router, Route, Switch, NavLink} from 'react-router-dom';
import AllProductsPage from './components/AllProductsPage';
import AddProductPage from './components/AddProductPage';
import ProductDetail from './components/ProductDetail';
import './App.css'
import {Provider} from 'react-redux';
import configureStore from './stores/configureStore';
import {loadProduct} from './actions/productActions';

export default class App extends React.Component {
  render() {

       const About=()=>(
              <div>
                  <h1>About : This application provides information about the products </h1>
              </div>
      );

      const Header = ()=>(
        <header>
            <NavLink to="/about" activeClassName="is-active" >About</NavLink>
            <NavLink to="/" exact={true} activeClassName="is-active" >Products</NavLink>
        </header>
    );

       
      const store = configureStore();
      //loading data from db.json and into the store through the reducers
      store.dispatch(loadProduct());

      return (
        <Provider store={store}>
          <Router>
              <Header/>
              <Switch>
                <Route path="/" exact={true} component={AllProductsPage} />
                <Route path="/about"  component={About}/>
                <Route path="/addProduct" component={AddProductPage} />
                <Route path="/ProductDetail" component={ProductDetail}/>
              </Switch>
          </Router>
        </Provider>
      );
  }
}

AllProductsPage.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { Link } from "react-router-dom";
import ProductList from "./ProductList";
import * as productActions from "../actions/productActions";
import { Button } from "react-bootstrap";

class AllProductsPage extends Component {
  render() {
    return (
      <div>
        <h1>Product List - Using Redux</h1>
        <ProductList products={this.props.products} />
        <br />
        <Link to="/addProduct"><Button variant="primary">Add Product</Button>{" "}</Link>
      </div>
    );
  }
}

function mapStateToProps(state, ownProps) {
  return {
    products: state.products,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(productActions, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(AllProductsPage);

ProductList.js

import React from "react";
import Product from "./Product";
import { Container, Row, Col} from "react-bootstrap";

export default class ProductList extends React.Component {
  render() {
    var productNodes = this.props.products.map((product) => {
      return (
        <Product
          key={product.id}
          id={product.id}
          name={product.name}
          quantity={product.quantity}
          price={product.price}
        >
          {product.text}
        </Product>
      );
    });
    return (
      <div>
        <Container>
          <Row>
          <Col xs="4">
                {productNodes}
              </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

产品.js

import React from "react";
import { Link } from "react-router-dom";
import { Prompt } from "react-router";
import { Card, Button } from "react-bootstrap";
export default class Comment extends React.Component {
  // eslint-disable-next-line
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Card style={{ width: "18rem" }}>
      <Prompt message={location =>location.pathname.includes("/ProductDetail")?  `Are you sure you want to view the details ?` : true  } />
        <Card.Body>
          <Card.Title>
            {this.props.name}
          </Card.Title>
          <Card.Text>
            Quantity : {this.props.quantity}
          </Card.Text>
          <Card.Title>{this.props.price}</Card.Title>
          <Link to={{pathname: "/ProductDetail",productName:{name : this.props.name}}}>
            <Button variant="primary">View Product</Button>
          </Link>
        </Card.Body>
      </Card>
    );
  }
}

这是我第一次使用 react-bootstrap。所以我在这里没有太多线索。

我想要的是卡片的生成方式应该是连续三张卡片。

现在这是我到目前为止完成的代码，但我对如何在不编写 <Col> 的情况下使卡片水平放置感到困惑。三次，连续重复相同的组件 3 次。请帮忙。

Answer 1

您需要将数据拆分成行，每行包含 3 列，每列包含一种产品。您可以使用chunk 函数 来解决这个问题，该函数将一个数组和一个 block 大小作为参数，并输出一个包含所有 block 的数组。有很多库实现了这一点(例如 lodash)，但为了简单起见，只需从 here 中获取 block 函数即可。 .

解决方案

1. 从知名库中复制或导入 block 函数。

const chunk = (arr, chunkSize = 1, cache = []) => {
  const tmp = [...arr]
  if (chunkSize <= 0) return cache
  while (tmp.length) cache.push(tmp.splice(0, chunkSize))
  return cache
}

1. 将您的数据分成固定长度的 block 。

const productsChunks = chunk(props.products, 3);

1. 将每个 block 呈现为包含 3 列的行，其中包含您的 Product 组件。

const rows = productsChunks.map((productChunk, index) => {
    const productsCols = productChunk.map((product, index) => {
        return (
        <Col xs="4" key={product.id}>
          <Product key={product.id} quantity={product.quantity} price={product.price} name={product.name} />      
        </Col>
      );
    });
    return <Row key={index}>{productsCols}</Row>
});

这应该可以解决您的问题，让我知道您对我的解决方案的看法。 为了清楚起见，我包含了一个 JSFiddle。我的 JSFiddle:Link