未捕获的 ReferenceError：导航栏未定义

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>
        );
    }
}

但我遇到了以下错误。并有原因的喜欢我。

有添加一些导入

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