Question

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

尝试导入错误：未从'react-bootstrap'中导出'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时，我也收到此警告错误，因此依赖项中缺少Card Component：

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

这是因为Card仅在1.0.0 beta版中存在。您正在使用0.32.4。

Answer 2

react-bootstrap的文档似乎还需要安装bootstrap。我已经将其与以下import语句一起使用。使用Card import语句时，请确保您导入{ 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"));

Answer 3

为此：

import Card from "react-bootstrap/Card";

这是小事！

npm install --save react-bootstrap bootstrap

Answer 4

您可以直接使用由react制作的自定义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;

这有效。

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

4 个答案: