react-bootstrap NavBar麻煩

Question

我是ReactJS的新手，在使用react-bootstrap導航欄時遇到麻煩。 我可以使用指導，因為對此幾乎沒有信息。

當我將navbar代碼直接添加到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;