React-Bootstrap导入NavBar模块

Question

我正在尝试从Reat项目（使用create-react-app引导）中的React-Bootstrap文档中重新创建一些代码。

但是我对这些Boostrap“子组件”有疑问，例如 NavBar.Header

这是我的代码：

import React, {Component} from 'react';
import {NavBar, Nav, NavItem} from 'react-bootstrap';

class MainNav extends Component {
  render() {
    return (
      <Navbar>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="#">React-Bootstrap</a>
          </Navbar.Brand>
        </Navbar.Header>
        <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.4}>Separated link</MenuItem>
          </NavDropdown>
        </Nav>
      </Navbar>
    )
  }
}

export default MainNav;

我收到以下控制台错误：

Uncaught TypeError: Cannot read property 'Header' of undefined
    at MainNav.render (MainNav.js:15)
    at ReactCompositeComponent.js:796
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at     ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext     (ReactCompositeComponent.js:795)
    at ReactCompositeComponentWrapper._renderValidatedComponent     (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
    at ReactCompositeComponentWrapper.mountComponent     (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)

我找到了这篇文章，似乎可以解释这个问题：http : //www.ericfeminella.com/blog/2016/08/12/react-bootstrap-es6-imports/

但是该解决方案对我不起作用。当我尝试直接从/lib/NavBar目录导入时，出现编译错误：

Error in ./src/container/blocks/MainNav.js
Module not found: 'react-bootstrap/lib/NavBar' in /homefolder/project/src/containers/blocks

有人可以帮我吗？

Answer 1

我可以在您的代码中看到两个主要问题：

1. 错别字：您正在使用Bootstrap的Navbar组件，但尝试将该组件作为Nav B ar 导入。注意导入中的大写字母“ B”。
2. 导入：您要使用的每个组件都需要导入。您缺少NavDropdown和MenuItem。

您的导入应如下所示：

import React, { Component } from 'react'; 
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';

更正该错误后，您的组件将运行。