Question

我开发了react + meteor app，然后我收到了这样的错误，

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

MainComponent

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 add

的方法

Answer 1

您在render中调用的类未定义。

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

解决方案是添加Navbar，如下所示：

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

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

Answer 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"
/>

未捕获的ReferenceError：未定义Navbar

2 个答案: