react-bootstrap NavBar問題

我是ReactJS的新手，無法使用react-bootstrap導航欄。由於這方面的信息很少或沒有，我可以使用指導。react-bootstrap NavBar問題

當我在index.js中直接添加navbar代碼並將其呈現在那裏時，它可以工作，但我想爲每個功能使用組件。

//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;

來源

2017-02-13 emekaokoli

您的反應代碼無效。請參閱下面的正確方法來做到這一點。

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;

來源

2017-02-13 20:02:38

嗨@anthony我都試過，看到錯誤[類導航欄擴展組件{ > 10 |常量appNavbar =（ |^ 11 | <導航欄倒數collapseOnSelect> 12 | 13 | – emekaokoli

請我還需要你對這個幫助 – emekaokoli

我糾正你的語法，我有沒有這個組件的上下文，並且沒有依賴關係會被拉入，所以當你點擊'Run code snippet'按鈕時，我不會期望它能夠工作。我很抱歉，我的初始回覆不正確，我已經糾正它並且做出了一個正確語法的工作示例，如下所示： https://codepen.io/c0un7z3r0/pen/zNQoey –

您在聲明回報內部的變量。

您可以在返回之前聲明它：

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;

或者你可以返回它不聲明：

class NavigationBar extends Component { 


render() { 




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

export default NavigationBar;

來源

2017-07-17 12:43:21

react-bootstrap NavBar問題

回答

相關問題