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的文档，您的导入应为

import Card from 'react-bootstrap/Card'

和

import Button from 'react-bootstrap/Button'

在此处参考文档Card 对于Button

要使用Card.Title或Card.Img，应将组件包装在Card.Body中，例如：

<Card>
    <Card.Body>
      <Card.Title>Card title</Card.Title>
      <Card.Text>
        This is a wider card with supporting text below as a natural lead-in to
        additional content. This card has even longer content than the first to
        show that equal height action.
      </Card.Text>
      <Card.Text>
        <small className="text-muted">Last updated 3 mins ago</small>
      </Card.Text>
    </Card.Body>
  </Card>

看看是否有帮助

Answer 2

从react-bootstrap 1.0.0-beta.x版本开始：

卡的正确导入声明为

import Card from "react-bootstrap/Card";

正确的Button导入语句为

import Button from "react-bootstrap/Button";

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

2 个答案: