React Bootstrap 添加到组件中 - 卡片

Question

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

编译失败 ./src/components/MyDishes.js SyntaxError: /Users/adiskop/zestie-frontend/src/components/MyDishes.js: 意外的标记，应为“}” (27:12)

25 | 26 | ))

27 | : null; | ^ 28 | 29 | return dishCards; 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); ```

Answer 1

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

这应该可以工作，如果这没有渲染卡片，则这意味着您的盘子 redux 状态为空。

React Bootstrap 添加到组件中 - 卡片

React Bootstrap adding into a component - cards

reactjs

react-bootstrap

bootstrap-4

react-redux