react-bootstrap 导航栏问题

Question

我是 ReactJS 新手，在使用 react-bootstrap 导航栏时遇到问题。我可以使用指导，因为这方面的信息很少或根本没有。

当我直接在 index.js 中添加导航栏代码并在那里渲染时，它可以工作，但我想为每个功能使用组件。

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(<App/>, document.getElementById('App'));

//App.js

import '../public/App.css';
import NavigationBar from './components/NavigationBar';
import Appintro from './components/Appintro';

class App extends Component {
  render() {
    return (
      <div className="App">
        <NavigationBar />
        <Appintro />
      </div>
    );
  }
}

export default App;

// NavBar 组件[这不起作用]

let React , {Component} = require('react')
let Navbar = require("react-bootstrap/lib/Navbar");
let NavItem = require("react-bootstrap/lib/NavItem");
let Nav = require ("react-bootstrap/lib/Nav");


class NavigationBar extends Component {

render() {
    return (
    <div>
        const appNavbar = (
        <Navbar inverse collapseOnSelect>
           <Navbar.Header>
            <Navbar.Brand>
            <a href="#">Company-x</a>
          </Navbar.Brand>
          <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              <NavItem eventKey={1} href="#">home</NavItem>
              <NavItem eventKey={2} href="#">about</NavItem>
              <NavItem eventKey={3} href="#">products</NavItem>
              <NavItem eventKey={4} href="#">services</NavItem>
            </Nav>
        </Navbar.Collapse>
    </Navbar>
    )
    </div>
    );
  }
}

export default NavigationBar;

// 介绍

import React, { Component } from 'react';
import headeeer from '../images/headeeer.jpg'; 
let Jumbotron = require ("react-bootstrap/lib/Jumbotron");

class Appintro extends Component {

  render() {
     Jumbotron=(
       <h1>Hello world, I am react-bootstrap jumbotron</h1>
       )
    return (
    <div>
      {Jumbotron}
      <img src={headeeer} className='imagesss' alt='jhe' />

    </div>

    );
  }
}
export default Appintro;

Answer 1

您的反应代码无效。请参阅下面的正确方法。

let React , {Component} = require('react')
let Navbar = require("react-bootstrap/lib/Navbar");
let NavItem = require("react-bootstrap/lib/NavItem");
let Nav = require ("react-bootstrap/lib/Nav");


class NavigationBar extends Component {

render() {

        const appNavbar = (
        <Navbar inverse collapseOnSelect>
           <Navbar.Header>
            <Navbar.Brand>
            <a href="#">Company-x</a>
          </Navbar.Brand>
          <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              <NavItem eventKey={1} href="#">home</NavItem>
              <NavItem eventKey={2} href="#">about</NavItem>
              <NavItem eventKey={3} href="#">products</NavItem>
              <NavItem eventKey={4} href="#">services</NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        );

    return (
    <div>
      {appNavbar}
    </div>
    );
  }
}

export default NavigationBar;