React-Bootstrap - 无法导入卡组件 &无法安装对等依赖项

Question

我一直在使用react-bootstrap，到目前为止，大多数组件都在工作，除了卡组件，这是我遇到的错误：

尝试导入错误："卡"不是从" react-bootstrap"导出的。

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 beta版本中。您正在使用0.32.4。

Answer 2

React-Bootstrap的文档看起来您还需要安装bootstrap。我可以使用以下导入语句来使用它。使用"react-bootstrap/Card"导入语句时，请确保导入Card而不是{ 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"));

Answer 3

谢谢：

import Card from "react-bootstrap/Card";

这是小事！

npm install --save react-bootstrap bootstrap

Answer 4

您可以直接使用React。

有一个名为 ReactStrap

的模块

将其安装为

npm install reactstrap 

并通过导入

来使用它

import {Card, CardText, CardBody, CardTitle, CardSubtitle, CardImg} from 'reactstrap';

整个代码变为

import React, { Component } from 'react';
import {Card, CardText, CardBody, CardTitle, CardSubtitle, CardImg} from 'reactstrap';
import ss from '../../ss.png';
class HomePage extends Component{
    render(){
        return(
            <div>
                <Card >
                <CardImg style={{width:'18rem' }} variant="top" src={ss}/>
                <CardBody>
                    <CardTitle>Card Title</CardTitle>
                    <CardText>
                    Some quick example text to build on the card title and make up the bulk of the card's content.
                    </CardText>
                    <button >Go somewhere</button>
                </CardBody>
                </Card>
                <Card>
  <CardBody>This is some text within a card body.</CardBody>
</Card>
            </div>
        )
    }

}
export default HomePage;

这有效。

Answer 5

我也有类似的问题，有此错误：

导出'carddeck'（以'carddeck'导入）未在'react-bootstrap'

中找到

问题是，每当我做 npm install react-bootstrap bootstrap@4.6.6.0 时，它将安装react-bootstrap版本：2.1.2与Bootstrap@4.6.0兼容。

因此，解决方案是 npm卸载react-bootstrap bootstrap 如果您已经在之前安装了react-bootstrap和bootstrap，并强制安装1.6.4版本，由

>

NPM安装react-bootstrap@1.6.4 bootstrap@4.6.6.0

我还因为相同的版本混合问题而遇到了手风琴问题。