React-Bootstrap導航欄不會呈現;類型不應該爲null，undefined，布爾值或數字

Question

這有點荒謬。我一直在直接從React-Bootstrap站點測試組件，有些則失敗而其他組件則成功。這裏是我的代碼：

import * as React from "react"; 
 
import * as ReactDOM from "react-dom"; 
 

 
var Jumbotron = require('react-bootstrap/lib/Jumbotron'); 
 
var Button = require('react-bootstrap/lib/Button'); 
 
var Nav = require('react-bootstrap/lib/Navbar').Nav; 
 
var NavItem = require('react-bootstrap/lib/Navbar').NavItem; 
 
var NavDropdown = require('react-bootstrap/lib/Navbar').NavDropdown; 
 
var Navbar = require('react-bootstrap/lib/Navbar'); 
 
var MenuItem = require('react-bootstrap/lib/Button').MenuItem; 
 

 
export class App extends React.Component<any, any> { 
 

 
    \t constructor() { 
 
\t  super(); 
 

 
\t } 
 

 
\t  return (
 
\t  \t <div> 
 
\t  \t <Navbar inverse collapseOnSelect> 
 
\t \t \t  <Navbar.Header> 
 
\t \t \t  <Navbar.Brand> 
 
\t \t \t   <a href="#">React-Bootstrap</a> 
 
\t \t \t  </Navbar.Brand> 
 
\t \t \t  <Navbar.Toggle /> 
 
\t \t \t  </Navbar.Header> 
 
\t \t \t  <Navbar.Collapse> 
 
\t \t \t  <Nav> 
 
\t \t \t   <NavItem eventKey={1} href="#">Link</NavItem> 
 
\t \t \t   <NavItem eventKey={2} href="#">Link</NavItem> 
 
\t \t \t   <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown"> 
 
\t \t \t   <MenuItem eventKey={3.1}>Action</MenuItem> 
 
\t \t \t   <MenuItem eventKey={3.2}>Another action</MenuItem> 
 
\t \t \t   <MenuItem eventKey={3.3}>Something else here</MenuItem> 
 
\t \t \t   <MenuItem divider /> 
 
\t \t \t   <MenuItem eventKey={3.3}>Separated link</MenuItem> 
 
\t \t \t   </NavDropdown> 
 
\t \t \t  </Nav> 
 
\t \t \t  <Nav pullRight> 
 
\t \t \t   <NavItem eventKey={1} href="#">Link Right</NavItem> 
 
\t \t \t   <NavItem eventKey={2} href="#">Link Right</NavItem> 
 
\t \t \t  </Nav> 
 
\t \t \t  </Navbar.Collapse> 
 
\t \t \t </Navbar> 
 
\t \t \t </div> 
 
\t ); 
 
\t } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

這是字面上直接從the Navbar example code用包裝DIV複製。它給了我應用程序.錯誤和Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of應用程序之一的13份副本。

但是，如果我嘗試Jumbotron demo code，它工作正常;它使Jumbotron沒有任何問題。我是否在import聲明中導入了錯誤的內容？這實際上是最簡單的例子，它怎麼會出現這樣的錯誤？

Answer 1

確定，刪除我的node-modules文件夾並使用npm i重新安裝修復了該問題。不知道我最初的安裝有什麼問題，但是擦除它似乎解決了問題，嘿，爲什麼不呢。

Answer 2

這是由於您的Navbar.Header和您使用Navbar的任何其他項目未定義的原因，但您的Navbar已定義。這可能是由於你巴貝爾不妥善解決他們

嘗試使用的原因導入不同的

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Navbar, Nav, NavItem, NavDropdown, Button, Jumbotron, MenuItem} from 'react-bootstrap'; 

我認爲這應該爲你工作。