React-Bootstrap 导航栏不会呈现；类型不应为 null、undefined、boolean 或 number

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> {

   constructor() {
     super();

 }

     return (
      <div>
      <Navbar inverse collapseOnSelect>
       <Navbar.Header>
         <Navbar.Brand>
           <a href="#">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>
     );
 }
}

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

这是直接从 the Navbar example code 复制过来的 div。它给了我 13 个 React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofApp. 错误副本和一个 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 ofApp``。

但是，如果我尝试 Jumbotron demo code，它工作正常；它使 Jumbotron 没有任何问题。我在 import 语句中导入了错误的内容吗？这简直就是最简单的例子，怎么会出错呢？

Answer 1

这是因为您 Navbar.Header 和与 Navbar 一起使用的任何其他项目未定义，但您的 Navbar 已定义。这可能是因为你的 babel 没有正确解析它们

尝试使用不同的方式导入为

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

我认为这对你有用。

Answer 2

好的，删除我的节点模块文件夹并使用 npm i 重新安装解决了这个问题。不确定我的初始安装有什么问题，但擦除它似乎可行，所以嘿，为什么不呢。

React-Bootstrap 导航栏不会呈现；类型不应为 null、undefined、boolean 或 number

React-Bootstrap navbar won't render; type should not be null, undefined, boolean or number

javascript

reactjs

react-bootstrap