Reactjs 未捕获引用错误：未定义导航栏

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

在本教程中，我尝试添加导航，获取数据。我试着像下面这样添加这个常量

主要组件

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

这样就消除了错误，但我得到了这样的结果

---

我想纠正Navbar添加的方式，您在render中调用的类没有定义

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

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

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

您是否在项目中包含引导样式？

---

首先安装react引导

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'

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

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

您发布的链接包含一个解决方案。你试过了吗？你能为你的“家”组件发布代码吗？看起来导航栏是未定义的，所以您的导入可能有错误。@JonB这是railsJs的解决方案我想meteor。@FinbarrO'B我想meteor+反应添加导航，就像您在这里有两个问题一样：（1）如何摆脱未定义的导航栏和（2）如何正确布局导航。你已经有了（1）的答案，真正的问题是（2）。当添加样式表时，我的整个项目似乎作为一个整体收缩，导航栏就是不合适的。你有过类似的经历吗？我刚刚发现你不能用常规引导和react引导，否则你会有这种奇怪的感觉。

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