如何解决尝试导入错误:“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 的主要版本往往不是非常向后兼容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。