react-bootstrap 无法重复官方文档navbar答案

【问题标题】：react-bootstrap could not be able to repeat the official document navbarreact-bootstrap 无法重复官方文档navbar
【发布时间】：2018-11-09 09:01:25
【问题描述】：

嗨，这是我早期的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 是这样说的。这就是我的全部

问题：
如何在我的项目中重复该示例？像我这样的新手，哪里有好的资源？

【问题讨论】：

标签： javascript html css twitter-bootstrap reactjs

【解决方案1】：

react-bootstrap 尚未实现所有原始引导组件或最新功能。另外react-bootstrap 使用起来有点重。

我认为简单的解决方案是直接在您的 jsx 内容中添加引导类。

将引导 CDN 添加到您的 index.html 或将 import "path/to/bootstrap.min.css"; 添加到组件的源文件。

然后您可以从官方引导网站复制/粘贴示例并将所有class=""标签更改为className=""

希望对你有帮助。

【讨论】：

感谢您的回答。我正在寻找教程和示例回购。我试过像你说的那样添加 CDN 和 import。因此它应该在我的代码中的其他地方。