时间戳

首页 > 解决方案 > React Bootstrap 添加到组件中 - 卡片

reactjs - React Bootstrap 添加到组件中 - 卡片

问题描述

如果卡片在页面上每行显示 4 张，我会很高兴。我收到此错误：

编译失败

25 | 26 | ))

27 | ： 无效的; | ^ 28 | 29 | 退还菜卡；30 | };

import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Card, Button } from 'react-bootstrap';

const MyDishes = props => {
    const dishCards =
        props.dishes.length > 0
            ? props.dishes.map(d => (
              <Row xs={1} md={2} className="g-4">
              {Array.from({ length: 4 }).map((_, idx) => (
                <Col>
                  <Card key={d.id} style={{ width: '30rem' }}>
                      <Card.Img variant="top" src={d.attributes.picture} />
                      <Card.Body>
                          <Card.Title>{d.attributes.name}</Card.Title>
                          <Card.Text>
                            Possibly some text here
                          </Card.Text>
                          <Link to={`/dishes/${d.id}`}>
                              <Button variant="primary">Go somewhere</Button>
                          </Link>
                      </Card.Body>
                  </Card>
                  </Col>
              ))
            : null;

    return dishCards;
};

const mapStateToProps = state => {
    return {
        dishes: state.myDishes
    };
};

export default connect(mapStateToProps)(MyDishes); ```

标签： reactjsbootstrap-4react-reduxreact-bootstrap

解决方案

import { React } from 'react';
import { Card, Button, CardGroup } from 'react-bootstrap';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

const MyDishes = props => {
    const { dishes } = props;

    return (
        <CardGroup>
            {dishes.length > 0 &&
                dishes.map(d => (
                    <Card key={d.id} style={{ width: '18rem' }}>
                        <Card.Img variant="top" src={d.attributes.picture} />
                        <Card.Body>
                            <Card.Title>{d.attributes.name}</Card.Title>
                            <Card.Text>Possibly some text here</Card.Text>
                            <Link to={`/dishes/${d.id}`}>
                                <Button variant="primary">Go somewhere</Button>
                            </Link>
                        </Card.Body>
                    </Card>
                ))}
        </CardGroup>
    );
};

const mapStateToProps = state => {
    return {
        dishes: state.myDishes
    };
};

export default connect(mapStateToProps)(MyDishes);

这应该可以工作，如果这没有渲染卡片，那么这意味着你的菜还原状态是​​空的。

推荐阅读