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

【问题标题】：Uncaught ReferenceError: Navbar is not defined未捕获的 ReferenceError：未定义导航栏
【发布时间】：2020-07-19 17:06:51
【问题描述】：

我开发了 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';

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

我想更正导航栏添加方式

【问题讨论】：

您发布的链接包含一个解决方案。你试过了吗？
您能发布您的“主页”组件的代码吗？ Navbar 似乎未定义，因此您的导入可能有问题。
@JonB 这个解决方案适用于我想要流星的 railsJs。
@FinbarrO'B 我想使用流星+反应添加导航，例如 react-bootstrap.github.io/components.html#navigation
这里有两个问题：（1）如何去掉未定义的NavBar；（2）如何正确布局导航。您已经有了 (1) 的答案，真正的问题是 (2)。

标签： reactjs meteor

【解决方案1】：

你在render中调用的类没有定义。

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

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

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

您是否还在项目中包含了 Bootstrap 样式？ https://react-bootstrap.github.io/getting-started/introduction

【讨论】：

添加样式表时，我的整个项目似乎整体缩小了，导航栏也不合适。你有过这样的经历吗？
我刚刚发现您不能将常规引导程序与 react-bootstrap 一起使用，否则会产生这种奇怪的影响。

【解决方案2】：

首先安装 react bootstrap

npm install react-bootstrap bootstrap
// or use yarn
yarn add react-bootstrap bootstrap

你也需要导入导航栏，你可以使用这个代码

import Navbar from 'react-bootstrap/Navbar'
// or
import { Navbar } from 'react-bootstrap'

对于您需要添加引导样式的样式。您如何以及包含哪些 Bootstrap 样式取决于您，但最简单的方法是包含来自 CDN 的最新样式。

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  crossorigin="anonymous"
/>

【讨论】：