尝试导入错误：“从 'react-bootstrap' 导出的 'Jumbotron' 未被导出（作为 'Jumbo' 导入）。”

Question

我刚开始学习React，试图使用react-bootstrap创建Jumbotron元素。我相信已经通过npm install react-bootstrap bootstrap安装了所有正确的模块，但是控制台报错显示“尝试导入错误：'Jumbotron is not exported from 'react-bootstrap' (imported as 'Jumbo')”。我的代码如下：

import React from 'react';
import { Jumbotron as Jumbo, Container } from 'react-bootstrap';
import styled from 'styled-components';
import boatImage from '../assets/boatImage.jpg';

const Styles = styled.div `
  .jumbo {
    background: url(${boatImage}) no-repeat fixed bottom;
    background-size: cover;
    color: #efefef;
    height: 200px;
    position: relative;
    z-index: -2;
  }
  .overlay {
    background-color: #000;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
`;

export const Jumbotron = () => (
  <Styles>
    <Jumbo fluid className="jumbo">
      <div className="overlay"></div>
      <Container>
        <h1>My App</h1>
        <p>Hello World</p>
      </Container>
    </Jumbo>
  </Styles>
)

这是我的package.json文件：

{
  "name": "landing-page",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.0.2",
    "husky": "^7.0.1",
    "lint-staged": "^11.1.1",
    "prettier": "^2.3.2",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.0-beta.4",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.0",
    "web-vitals": "^1.1.2"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "devDependencies": {
    "@babel/core": "^7.14.8"
  }
}

我是否以某种方式导入有误？还是存在某些依赖问题？react-bootstrap的其他所有内容似乎都可以正常工作。谢谢您提前的帮助。

- yugtah

---

尝试使用 import Jumbotron from 'react-bootstrap/Jumbotron';。 - Nick Mitchell

Answer 1

在Bootstrap 5中不可用，因此如果您按照https://react-bootstrap.github.io/上的指南安装了最新版本，则拥有更新版本的react-bootstrap。

我看到您遵循了Brice Ayres的教程，他使用的是Bootstrap 4.3.1

以下是您可以执行的操作信息: https://getbootstrap.com/docs/5.0/migration/#jumbotron

编辑1: 基本上，放弃Jumbotron，在React-Bootstrap中使用自己的标题和CSS样式表。这非常容易

- Vetle Andre Remme Olsen

Answer 2

U won't be able to use Jumbotron as it is no longer available in the latest Bootstrap 5 
import {Jumbotron} from  "reactstrap";  in Home.js won't work if u have the latest Bootstrap as it was removed.
Add the below CSS in App.css file  and insted of using <Jumbotron></Jumbotron> use <div class="jumbotron">

.container-fluid .jumbotron, .container .jumbotron {
  border-radius: 6px;
  padding-left: 15px;
  padding-right: 15px;
}

@media screen and (min-width: 768px)
{
.container-fluid .jumbotron, .container .jumbotron {
    padding-left: 60px;
    padding-right: 60px;
}
}

@media screen and (min-width: 768px)
{
.jumbotron {
    padding-bottom: 48px;
    padding-top: 48px;
}
}

.jumbotron {
  background-color: #eee;
  padding-left: 60px;
  padding-right: 60px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  padding-top: 30px;
}

- Shreyansh Gupta

Answer 3

在Bootstrap 5中，Jumbotron无法正常使用。如果您安装了最新版本的Bootstrap，则可以回退到较低版本。但是，如果您希望继续使用此版本，则可以使用以下代码片段：

<div class="container-fluid bg-light text-dark p-5">
  <div class="container bg-light p-5">
    <h1 class="display-4 fw-bold">Welcome to Admin Dashboard</h1>
    <hr>
      <p>Go to My Website</p>
      <a href="#" class="btn btn-primary">link</a>
  </div>
</div>

同时，前往此链接并使用“检查元素”功能根据需要对上面的代码片段进行修改。 Jumbotron示例

- Vivek Prajapati

Answer 4

请通过执行 npm uninstall react-bootstrap bootstrap 命令卸载 Bootstrap，然后再使用命令 npm install react-bootstrap bootstrap@4.6.0 安装它。Bootstrap 的主要版本通常不向后兼容，这应该可以解决问题。请注意保留 HTML 标签。

- Peter Akobe

Answer 5

Jumbotron 是 react-bootstrap v3.3.x 的一部分，它使用 React。

它不是您正在使用的基于旧版本 Bootstrap 的 react-bootstrap 2.0.0-beta.4 的一部分。

(Bootstrap 的主要版本通常不具备向后兼容性。

- Quentin

Answer 6

我知道我的回应可能对您来说有些晚了，但它可能会帮助其他人... 在新版本的Bootstrap中，您可以使用其className而不是其组件

<div className="jumbotron">.....</div>

- arlabbafi