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

问题描述

我正在开始学习 React 并尝试从 react-bootstrap 创建一个 Jumbotron 元素。我很确定我已经用 <div id="container" style="padding:0px; border:1px solid red;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000" width="2000px" height="1000px"> <circle cx="100" cy="100" r="10" fill="#4285f4" id="circle"></circle> </svg> </div> <script> console.log('Before:'); console.log(document.getElementById('circle').getAttribute('cx') + ','+ document.getElementById('circle').getAttribute('cy')); setTimeout(function(){ console.log('After setting to 0,0.'); document.getElementById('circle').setAttribute('cx',0) document.getElementById('circle').setAttribute('cy',0)},2000); </script> 安装了所有正确的模块，但是我收到一个控制台错误，上面写着“尝试导入错误：'Jumbotron 不是从'react-bootstrap'导出（导入为'巨无霸'）”。我的代码如下：

npm install react-bootstrap bootstrap

这是我的 package.json：

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

我是否以某种方式导入错误？还是有一些依赖问题？来自 react-bootstrap 的所有其他东西似乎都在正常工作。提前致谢。

解决方法

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

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

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