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

Question

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

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

此外，我不得不从react-bootstrap示例中删除from enum import Enum, DynamicClassAttribute class MixedCaseEnum(Enum): @DynamicClassAttribute def name(self): return self._name_.title() class Rank(MixedCaseEnum): KING = 13 print(Rank.KING.name) # outputs 'King' print(Rank.KING.value) # outputs 13 行，因为它引起了：

NavDropdown.Divider

我的index.js文件中有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. 。

有人在这里看到问题吗？

我的package.json：

import 'bootstrap/dist/css/bootstrap.min.css';

我的App.js：

{
  "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"
  ]
}

我的DesignerNavbar.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;

Answer 1

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

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