नेविबार

Question

मैंने बूटस्ट्रैप का उपयोग करके एक नेविबार प्रोग्राम किया है और प्रतिक्रिया दें। बूटस्ट्रैप की कार्यक्षमता प्राप्त करने के लिए स्थापित होना चाहिए और bootstrap.js jquery.js। मैं बस मूल रूप से बूटस्ट्रैप की सीएसएस फ़ाइल और प्रतिक्रियाओं की कार्यक्षमता का उपयोग करना चाहता हूं। क्या प्रतिक्रियाओं के साथ बूटस्ट्रैप का उपयोग करना समझ में आता है?

मुझे नेविगेशन प्रोग्राम करने के लिए प्रतिक्रिया में थोड़ी मदद के साथ एहसास होना चाहिए। यहां मेरे हेडर का स्रोत। मैं बिना bootstrap.js और jquery.min.js

import React from "react" 
export class Header extends React.Component { 
    render() { 
     return (
      <nav className="navbar-kwp-header navbar-default navbar-fixed-top"> 
       <div className="container"> 
        <div className="navbar-header"> 
         <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navbar"> 
          <span className="sr-only">Navigation ein-/ausblenden</span> 
          <span className="icon-bar"></span> 
          <span className="icon-bar"></span> 
          <span className="icon-bar"></span> 
         </button> 

         <a className="navbar-brand" href="#"><img src="images/logo.jpg" alt="" /></a> 
        </div> 

        <div id="Navbar" className="navbar-collapse collapse"> 
         <ul className="nav navbar-nav"> 
          <li><a href="#">Home</a></li> 

          <li className="dropdown"><a className="dropdown" data-toggle="dropdown" role="button" aria-expanded="false">Service <span className="caret"></span></a> 
           <ul className="dropdown-menu" role="menu"> 
            <li><a href="#">Downloads</a></li> 
            <li><a href="#">Glossar</a></li> 
            <li><a href="#">Newsletter</a></li> 
           </ul> 
          </li> 

         </ul> 
        </div> 
       </div> 
      </nav> 
     ); 
    } 
} 

Answer 1

आप आसानी से में बूटस्ट्रैप का उपयोग कर सकते reactjs में नेवबार programm करने के लिए मदद की जरूरत है अपने प्रतिक्रिया-बूटस्ट्रैप पैकेज का उपयोग करके घटकों प्रतिक्रिया होती है। https://react-bootstrap.github.io/

यह एक ऐसा उदाहरण है जिसका उपयोग आप करना चाहते हैं।

import React from "react" 
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'; 

export class Header extends React.Component { 
    render() { 
     return (
      <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.3}>Separated link</MenuItem> 
        </NavDropdown> 
       </Nav> 
      </Navbar> 
     ); 
    } 
} 

Answer 2

आप मैन्युअल नेवबार की टॉगल संभालने के लिए एक राज्य चर कोड कर सकते हैं:

class App extends Component { 
    state = { 
    navCollapsed: true 
    } 

    _onToggleNav =() => { 
    this.setState({ navCollapsed: !this.state.navCollapsed }) 
    } 

    render() { 
    const {navCollapsed} = this.state 

    return (
     <nav className='navbar navbar-default'> 
     <div className='navbar-header'> 
      <a className='navbar-brand' href='/'>Your Brand</a> 
      <button 
      aria-expanded='false' 
      className='navbar-toggle collapsed' 
      onClick={this._onToggleNav} 
      type='button' 
      > 
      <span className='sr-only'>Toggle navigation</span> 
      <span className='icon-bar'></span> 
      <span className='icon-bar'></span> 
      <span className='icon-bar'></span> 
      </button> 
     </div> 
     <div 
      className={(navCollapsed ? 'collapse' : '') + ' navbar-collapse'} 
      > 
      <ul className='nav navbar-nav navbar-right'> 
      <li> 
       <a>About</a> 
      </li> 
      </ul> 
     </div> 
     </nav> 
    ) 
    } 
}