反応起動ストラップNavBarトラブル

Question

私はReactJSを初めて使用しており、反応起動ストラップナビバーの使用に問題があります。これに関する情報がほとんどまたはまったくないので、ガイダンスを使用することができます。

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; 

//ナビゲーションバーコンポーネント[このdoesntの仕事]

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;

Answer 2

あなたはリターン内の変数を宣言しています。

あなたは復帰前にそれを宣言することができます。

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;