“react-bootstrap”不包含名为“Card”的导出

Question

我正在使用新的 react-bootstrap v1 构建一个 React 应用程序（其中用于 React 的 Bootstrap 3 已更改为不再包含 Panel 组件 - 它现在被替换为 Card 组件）。我安装了 npm install 这是： npm install react-bootstrap bootstrap

但是当我运行应用程序时，它告诉我：“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>
        );
    }
}

Answer 1

来自 react-bootstrap 版本 1.0.0-beta.x：

Card 的正确导入语句是

import Card from "react-bootstrap/Card";

Button 的正确导入语句是

import Button from "react-bootstrap/Button";