Reactjs ';react引导&x27;不包含名为';卡片';

Reactjs ';react引导&x27;不包含名为';卡片';,reactjs,react-bootstrap,Reactjs,React Bootstrap,我正在使用新的React引导程序v1构建React应用程序(React的引导程序3已更改为不再包含面板组件-现在已替换为卡组件)。我安装了npm安装,它是:npm安装react引导引导引导引导 但当我运行应用程序时,它告诉我:“react bootstrap”不包含名为“Card”的导出。下面是我的组件的外观: import React, { Component } from 'react'; import mealsCall from '../DBRequests/mealCalls'; im

我正在使用新的React引导程序v1构建React应用程序(React的引导程序3已更改为不再包含面板组件-现在已替换为卡组件)。我安装了npm安装,它是:npm安装react引导引导引导引导

但当我运行应用程序时,它告诉我:“react bootstrap”不包含名为“Card”的导出。下面是我的组件的外观:

import React, { Component } from 'react';
import mealsCall from '../DBRequests/mealCalls';
import { Card, Button } from 'react-bootstrap';


export class Meals extends Component {

    state = {
        meals: [],
    }

    componentDidMount() {
        mealsCall
            .getMeals()
            .then((meals) => {
                this.setState({ meals })
            })
            .catch((error) => {
                console.error('error with GET meals call', error);
            });
    };

    render() {
        const meals = this.state.meals.map((meal) => {
            return (
                <div key={meal.id}>
                <Card style={{ width: '18rem' }}>
                    <Card.Img variant="top" src="holder.js/100px180" />
                    <Card.Body>
                        <Card.Title>{meal.mealName}</Card.Title>
                        <Card.Text>
                            <h3>{meal.restaurantName}</h3>
                            <h4>{meal.city}, {meal.state}</h4>
                        </Card.Text>
                        <Button variant="primary">View Meal</Button>
                    </Card.Body>
                  </Card>
              </div>
           );
        })
        return (
            <div>
                {meals}
            </div>
        );
    }
}
import React,{Component}来自'React';
从“../DBRequests/mealCalls”导入mealsCall;
从“react bootstrap”导入{Card,Button};
导出类组件{
状态={
膳食:[],
}
componentDidMount(){
米尔斯凯尔
.getfeeds()
.然后((膳食)=>{
this.setState({feeds})
})
.catch((错误)=>{
console.error('获取膳食调用出错',错误);
});
};
render(){
const-fines=this.state.fines.map((膳食)=>{
返回(
{MEAT.mealName}
{膳食.餐厅名称}
{MEIN.city},{MEIN.state}
观餐
);
})
返回(
{膳食}
);
}
}

来自react引导版本1.0.0-beta.x:

卡的正确导入语句为

import Card from "react-bootstrap/Card";
按钮的正确导入语句为

import Button from "react-bootstrap/Button";

你能分享你安装的
react bootstrap
版本吗?嘿@Malias17你正在运行哪个版本的react bootstrap?