reactjs - Uncaught ReferenceError : Navbar is not defined

Question

我开发了react+meteor应用程序，然后我得到了这样的错误，

我尝试添加导航https://react-bootstrap.github.io/components.html#navigation ，获取本教程中的数据。我尝试像下面这样添加这个常量

主要组件

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Button } from 'react-bootstrap';

import AccountsUIWrapper from './AccountsUIWrapper.jsx';

// App component - represents the whole app
export default class Home extends Component {
    constructor(props) {
        super(props);

        this.state = {
            hideCompleted: false,
        };
    }

    render() {
        const navbarInstance = (
            <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>
        );

        return (
            <div>
                {navbarInstance}

                <div className="container">
                    <div className="row">
                        <div className="navbar nav-inline">
                            <AccountsUIWrapper />
                        </div>
                    </div>

                    <header>
                        <h1>School Attendance</h1>
                        <h3>Lecturer Report</h3>
                    </header>

                    <h4>This is home</h4>
                </div>
            </div>
        );
    }
}

但我收到以下错误。和there像我一样理性。

添加一些导入

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

像这样然后消失错误，但我是这样的

我想正确添加导航栏

Answer 1

您在渲染中调用的类未定义。

如果您从“react-bootstrap”导入{Button}，则需要导入您计划在文件中使用的每个组件(属于该框架的一部分)。

解决方案是添加导航栏，如下所示:

import { Button, Navbar } from 'react-bootstrap'

您的项目中还包含 Bootstrap 样式吗？ https://react-bootstrap.github.io/getting-started/introduction