我从 react-bootstrap 文档复制并粘贴了导航栏示例，并收到错误和样式与文档不匹配答案

【问题标题】：I copy and pasted Navbar example from react-bootstrap docs and receiving error and styling doesn't match docs我从 react-bootstrap 文档复制并粘贴了导航栏示例，并收到错误和样式与文档不匹配
【发布时间】：2019-02-22 21:28:50
【问题描述】：

我从 react-bootstrap 文档中获取了 this Navbar code example 并将其放入我的组件 JavaScript 文件中。根据文档，它应该出现在我的浏览器中，如下所示：

...但我的看起来像这样：

此外，我不得不从 react-bootstrap 示例中删除 NavDropdown.Divider 行，因为它导致：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我的 index.js 文件中有 import 'bootstrap/dist/css/bootstrap.min.css';。

有人看到这里的问题吗？

我的 package.json：

{
  "name": "consilio-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.2.1",
    "react": "^16.8.1",
    "react-bootstrap": "^1.0.0-beta.5",
    "react-dom": "^16.8.1",
    "react-scripts": "2.1.5",
    "typescript": "^3.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

我的 App.js：

import React, { Component } from 'react';
import DesignerNavbar from './DesignerNavbar/DesignerNavbar';

class App extends Component {
    render() {
        return (
            <div className="App">
                <DesignerNavbar></DesignerNavbar>
            </div>
        );
    }
}

export default App;

我的 DesignerNavbar.js：

import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/Nav';

const designerNavbar  = (props) => {
    return (
        <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
            <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
            </NavDropdown>
          </Nav>
          <Nav>
            <Nav.Link href="#deets">More deets</Nav.Link>
            <Nav.Link eventKey={2} href="#memes">
              Dank memes
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    )
};

export default designerNavbar;

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

上面的导入中有错字。您正在使用 NavDropdown 但导入 Nav

您是否尝试过导入import NavDropdown from 'react-bootstrap/NavDropdown'？

【讨论】：