为什么我在反应引导程序中不使用正确的卡？答案

【问题标题】：Why I do not use correct Card in react bootstrap?为什么我在反应引导程序中不使用正确的卡？
【发布时间】：2021-04-25 15:03:44
【问题描述】：

我是 react 初学者。

我正在尝试从引导程序中使用 Card，如下所示：

import React from "react";
import { Card, Button } from "@material-ui/core";


const ProtfolioSection: React.FC = () => {
  return (
    <Card style={{ width: "18rem" }}>
      <Card.Img variant="top" src="src/img/background.png" />
      <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">Go somewhere</Button>
      </Card.Body>
    </Card>
  );
};

export default ProtfolioSection;

我遇到了一个错误：

类型'(props: CardProps) => Element'.ts(2339) 上不存在属性'Img'

类型'(props: CardProps) => Element'.ts(2339) 上不存在属性'Body'

等等..

有人知道如何修复它并处理它吗？谢谢。

【问题讨论】：

标签： reactjs typescript bootstrap-4

【解决方案1】：

您正在从@material-ui/core 导入，而不是从react-bootstrap。

Here is how to get it working with material-ui:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 140,
  },
});

export default function MediaCard() {
  const classes = useStyles();

  return (
    <Card className={classes.root}>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image="/static/images/cards/contemplative-reptile.jpg"
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
  );
}

Here is how to get it working with react-bootstrap:

import React from 'react';
import { Card, Button } from 'react-bootstrap';

export const PortfolioSection: React.FC = () => {

    return <Card style={{ width: '18rem' }}>
        <Card.Img variant="top" src="holder.js/100px180" />
        <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">Go somewhere</Button>
        </Card.Body>
    </Card>
}

【讨论】：