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

Question

我正在开始学习 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 的其他所有内容似乎都工作正常。提前致谢。

Answer 1

JumboTron 不适用于 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。这很容易

Answer 2

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

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

（Bootstrap 的主要版本往往不能很好地向后兼容。