React-Bootstrap - Компонент карты не может быть импортирован и не может установить одноранговые зависимости

Question

Я использовал response-bootstrap, и до сих пор большинство компонентов работают, кроме компонента Card, и вот эта ошибка, которую я получаю:

Попытка импортировать ошибку: «Card» не экспортируетсяот 'реакции-бутстрапа'.

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

export default class NewsCard extends Component {
    render() {
        return (
            <div>
                <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>
            </div>
        )
        }
    }

Когда я устанавливаю React-Bootstrap, я получаю это предупреждение также, поэтому компонент карты отсутствует в зависимости:

npm WARN react-bootstrap-card@0.2.1 requires a peer of react-bootstrap@^0.30.7 but none is installed. You must install peer dependencies yourself. 

Есть кто-нибудь ещестолкнулся с этой проблемой или может привести меня в правильном направлении?спасибо

Answer 1

Это потому, что карта существует только в бета-версии 1.0.0.Вы используете 0.32.4.

Answer 2

Документация для реакции-начальной загрузки выглядит так, как будто вам также нужно установить bootstrap.У меня это работает со следующим оператором импорта.Убедитесь, что вы импортируете Card, а не { Card } при использовании оператора импорта "react-bootstrap/Card".

import Card from "react-bootstrap/Card";
import ReactDOM from "react-dom";
import React, { Component } from "react";

class Todo extends Component {
  render() {
    return (
      <Card>
        <Card.Body>This is some text within a card body.</Card.Body>
      </Card>
    );
  }
}

ReactDOM.render(<Todo />, document.getElementById("root"));