«response-bootstrap» не содержит экспорт с именем «Card» - PullRequest
Новая
       5

«response-bootstrap» не содержит экспорт с именем «Card»

0 голосов
/ 05 февраля 2019

Я создаю приложение React с новым response-bootstrap v1 (где Bootstrap 3 для React изменился и больше не включает компонент Panel - теперь он заменен компонентом Card).Я установил npm install, который выглядит следующим образом: npm installact-bootstrap bootstrap

Но когда я запускаю приложение, оно говорит мне: «response-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>
        );
    }
}

1 Ответ

0 голосов
/ 05 февраля 2019

Согласно документам react-bootstrap ваш импорт должен быть

import Card from 'react-bootstrap/Card'

и

import Button from 'react-bootstrap/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>

посмотрите, поможет ли это

...