React-Bootstrap导入NavBar模块

Question

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

但我对这些 Boostrap "sub-components" 有疑问，例如 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

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

打字错误：您正在使用 Bootstrap 的 Navbar 组件，但是尝试导入组件作为 NavBar；注意导入中的大写"B"。
Imports：您打算使用的每个组件都需要导入。您缺少 NavDropdown 和 MenuItem。

您的导入应如下所示：

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

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

Answer 2

你也可以使用 material: mdbootstrap https://github.com/mdbootstrap/bootstrap-material-design

npm install mdbootstrap

要实现的导航栏： https://mdbootstrap.com/react/components/navbar/

导航栏文件组件示例如下NavbarFeatures.js

import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class NavbarFeatures extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapse: false,
            isWideEnough: false,
            dropdownOpen: false
        };
    this.onClick = this.onClick.bind(this);
    this.toggle = this.toggle.bind(this);
    }

    onClick(){
        this.setState({
            collapse: !this.state.collapse,
        });
    }

    toggle() {
        this.setState({
            dropdownOpen: !this.state.dropdownOpen
        });
    }

    render() {
        return (
            <Router>
                <Navbar color="indigo" dark expand="md" scrolling>
                    <NavbarBrand href="/">
                        <strong>Navbar</strong>
                    </NavbarBrand>
                    { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
                    <Collapse isOpen = { this.state.collapse } navbar>
                        <NavbarNav left>
                          <NavItem active>
                              <NavLink to="#">Home</NavLink>
                          </NavItem>
                          <NavItem>
                              <NavLink to="#">Features</NavLink>
                          </NavItem>
                          <NavItem>
                              <NavLink to="#">Pricing</NavLink>
                          </NavItem>
                          <NavItem>
                              <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                              <DropdownToggle nav caret>Dropdown</DropdownToggle>
                              <DropdownMenu>
                                  <DropdownItem href="#">Action</DropdownItem>
                                  <DropdownItem href="#">Another Action</DropdownItem>
                                  <DropdownItem href="#">Something else here</DropdownItem>
                                  <DropdownItem href="#">Something else here</DropdownItem>
                              </DropdownMenu>
                              </Dropdown>
                          </NavItem>
                        </NavbarNav>
                        <NavbarNav right>
                          <NavItem>
                            <form className="form-inline md-form mt-0">
                              <input className="form-control mr-sm-2 mb-0 text-white" type="text" placeholder="Search" aria-label="Search"/>
                            </form>
                          </NavItem>
                        </NavbarNav>
                    </Collapse>
                </Navbar>
            </Router>
        );
    }
}

您可以通过以下方式加载 CDNJS：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.5/css/mdb.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.5/js/mdb.min.js"></script>

React-Bootstrap导入NavBar模块

React-Bootstrap Import NavBar module

reactjs

react-bootstrap

create-react-app