我正在开始学习React，并试图从React -bootstrap创建一个大屏幕元素。我很确定我已经用npm install react-bootstrap bootstrap安装了所有正确的模块，但我得到一个控制台错误，上面写着"尝试导入错误:'超大屏幕没有从'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的其他一切似乎都在正常工作。提前谢谢。
JumboTron不能在bootstrap 5中工作，所以如果你按照https://react-bootstrap.github.io/上的指南安装了最新版本，你就有了新版本的react-bootstrap。
我看到你遵循Brice Ayres的教程他使用bootstrap 4.3.1
这里是你可以做的信息:https://getbootstrap.com/docs/5.0/migration/的超大
编辑1:基本上，放下大屏幕，使用react-bootstrap你自己的css制作你自己的标题。这很简单
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;
}请执行npm uninstall react-bootstrap bootstrap卸载引导程序，然后使用命令npm install react-bootstrap bootstrap@4.6.0重新安装Bootstrap的主要版本往往不是非常向后兼容彼此。这应该可以工作。
Jumbotron是react-bootstrap v3.3的一部分。
它不是react-bootstrap 2.0.0-beta的一部分。
(Bootstrap的主要版本往往不是很向后兼容。
超大屏幕在bootstrap 5中不工作。因此，如果您安装了最新版本的引导，您可以恢复到较低的版本。但是，如果您希望继续使用此版本，可以使用以下代码片段:
<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>
也到这个链接使用"inspect element"功能，使上述代码段修改，根据您的需要。大屏幕示例
我知道我的回复对你来说可能晚了，但它会帮助其他人…在新版bootstrap
中，你可以使用它的className来代替它的组件。<div className="jumbotron">.....</div>