您好，这是我早期的 frontend 技能。我知道 bootstrap 正处于从 3 到 4 的过渡期。我决定按照最新的。我为我的包选择了 react-bootstrap。如果我做错了，请告诉我。我愿意实践最好的解决方案。
这是我的设置。
package.json
{
"name": "f1",
"version": "0.1.0",
"private": true,
"dependencies": {
"@amcharts/amcharts3-react": "^3.1.0",
"ajv": "^6.5.0",
"amcharts3": "^3.21.12",
"axios": "^0.18.0",
"bootstrap": "^4.1.1",
"jquery": "^3.3.1",
"lodash": "^4.17.5",
"react": "^16.4.0",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.4.0",
"react-redux": "^5.0.7",
"react-router-bootstrap": "^0.24.4",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"reactstrap": "^6.0.1",
"recharts": "^1.0.0-beta.10",
"redux": "^3.7.2",
"redux-form": "^7.2.3",
"redux-saga": "^0.16.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Header.js
import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from 'react-bootstrap';
//In render(). Copy from https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly
<div className='container navbar-expand'>
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand className='navbar-brand'>
<a href="#brand">React-Bootstrap</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">
Link
</NavItem>
<NavItem eventKey={2} href="#">
Link
</NavItem>
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">
Link Right
</NavItem>
<NavItem eventKey={2} href="#">
Link Right
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<![endif]-->
</html>
与原始代码不同的是，我添加了 container navbar-expand 以便从 answer 开始扩展它。我说过了。我只有这些
问题:
如何在我的元素中重复这个例子？
哪里有适合我这种菜鸟的好资源？
最佳答案
react-bootstrap 尚未实现所有原始 Bootstrap 组件或最新功能。另外 react-bootstrap 使用起来有点繁重。
我认为简单的解决方案是直接在您的 jsx 内容中添加 Bootstrap 类。
将 Bootstrap CDN 添加到您的 index.html 或将 import "path/to/bootstrap.min.css"; 添加到您组件的源文件。
然后您可以从官方 Bootstrap 网站复制/粘贴示例，并通过 className=""
class="" 标签
希望对你有帮助。
关于javascript - react-bootstrap 无法重复官方文档的navbar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50605819/