尝试导入错误：'Jumbotron 未从'react-bootstrap' 导出（导入为'Jumbo'）答案

【问题标题】：Attempted import error: 'Jumbotron is not exported from 'react-bootstrap' (imported as 'Jumbo')尝试导入错误：'Jumbotron 未从'react-bootstrap' 导出（导入为'Jumbo'）
【发布时间】：2021-07-29 09:50:05
【问题描述】：

我开始学习 React 并尝试从 react-bootstrap 创建一个 Jumbotron 元素。我很确定我已经用npm install react-bootstrap bootstrap 安装了所有正确的模块，但是我收到一个控制台错误，上面写着“尝试导入错误：'Jumbotron 没有从'react-bootstrap' 导出（导入为'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 中的其他所有内容似乎都正常工作。提前致谢。

【问题讨论】：

试试import Jumbotron from 'react-bootstrap/Jumbotron';

标签： javascript node.js react-bootstrap

【解决方案1】：

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

我看到你遵循了 Brice Ayres 的教程他使用引导程序 4.3.1

以下是有关您可以做什么的信息： https://getbootstrap.com/docs/5.0/migration/#jumbotron

编辑 1：基本上，放下 Jumbotron，使用 react-bootstrap 制作您自己的标头您自己的 css。很简单

【讨论】：

【解决方案2】：

请通过执行 npm uninstall react-bootstrap bootstrap 卸载引导程序，然后使用命令 npm install react-bootstrap bootstrap@4.6.0 再次安装它 Bootstrap 的主要版本往往不是非常向后兼容。这应该可以。

【讨论】：

【解决方案3】：

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

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

（Bootstrap 的主要版本往往不是非常向后兼容。

【讨论】：

【解决方案4】：

Jumbotron 在 bootstrap 5 中不起作用。因此，如果您安装了最新版本的 bootstrap，您可以恢复到较低版本。但是，如果您希望继续使用此版本，可以使用以下代码 sn-p：

<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>

还可以访问此链接并使用“检查元素”功能根据您的需要对上述代码 sn-p 进行修改。 Jumbotron Example

【讨论】：

【解决方案5】：

我知道我的回复可能对你来说迟了，但它会帮助其他人...... 你可以在新版本的 bootstrap 中使用它的 className 而不是它的组件

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

【讨论】：

【解决方案6】：

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;
}

【讨论】：