reactstrap navbar Header scheint zu fehlen

Question

Ich bin derzeit ein navbar mit reactstrap zu schaffen versuchen, und ich würde eine

<div className="navbar-header"> 
 
</div>

nutzen möchten, die zu einer Navbar.Header Karte würde in React-Bootstrap.

Leider kann ich solche Komponente in reactstrap nicht finden. Fehle ich etwas?

Answer 1

import React from 'react'; 
import { 
    Collapse, 
    Navbar, 
    NavbarToggler, 
    NavbarBrand, 
    Nav, 
    NavItem, 
    NavLink, 
    UncontrolledDropdown, 
    DropdownToggle, 
    DropdownMenu, 
    DropdownItem } from 'reactstrap'; 

export default class Example extends React.Component { 
    constructor(props) { 
    super(props); 

    this.toggle = this.toggle.bind(this); 
    this.state = { 
     isOpen: false 
    }; 
    } 
    toggle() { 
    this.setState({ 
     isOpen: !this.state.isOpen 
    }); 
    } 
    render() { 
    return (
     <div> 
     <Navbar color="faded" light expand="md"> 
      <NavbarBrand href="/">reactstrap</NavbarBrand> 
      <NavbarToggler onClick={this.toggle} /> 
      <Collapse isOpen={this.state.isOpen} navbar> 
      <Nav className="ml-auto" navbar> 
       <NavItem> 
       <NavLink href="/components/">Components</NavLink> 
       </NavItem> 
       <NavItem> 
       <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink> 
       </NavItem> 
       <UncontrolledDropdown nav inNavbar> 
       <DropdownToggle nav caret> 
        Options 
       </DropdownToggle> 
       <DropdownMenu > 
        <DropdownItem> 
        Option 1 
        </DropdownItem> 
        <DropdownItem> 
        Option 2 
        </DropdownItem> 
        <DropdownItem divider /> 
        <DropdownItem> 
        Reset 
        </DropdownItem> 
       </DropdownMenu> 
       </UncontrolledDropdown> 
      </Nav> 
      </Collapse> 
     </Navbar> 
     </div> 
    ); 
    } 
} 
<!--Navbar Properties--> 
Navbar.propTypes = { 
    light: PropTypes.bool, 
    dark: PropTypes.bool, 
    fixed: PropTypes.string, 
    color: PropTypes.string, 
    role: PropTypes.string, 
    expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), 
    tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) 
    // pass in custom element to use 
} 
<!--NavbarBrand Properties--> 
NavbarBrand.propTypes = { 
    tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) 
    // pass in custom element to use 
} 
<!--NavbarToggler--> 
import React from 'react'; 
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap'; 

export default class Example extends React.Component { 
    constructor(props) { 
    super(props); 

    this.toggleNavbar = this.toggleNavbar.bind(this); 
    this.state = { 
     collapsed: true 
    }; 
    } 

    toggleNavbar() { 
    this.setState({ 
     collapsed: !this.state.collapsed 
    }); 
    } 
    render() { 
    return (
     <div> 
     <Navbar color="faded" light> 
      <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand> 
      <NavbarToggler onClick={this.toggleNavbar} className="mr-2" /> 
      <Collapse isOpen={!this.state.collapsed} navbar> 
      <Nav navbar> 
       <NavItem> 
       <NavLink href="/components/">Components</NavLink> 
       </NavItem> 
       <NavItem> 
       <NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink> 
       </NavItem> 
      </Nav> 
      </Collapse> 
     </Navbar> 
     </div> 
    ); 
    } 
} 
<!--NavbarToggler Properties--> 
NavbarToggler.propTypes = { 
    type: PropTypes.string, 
    tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]) 
    // pass in custom element to use 
} 

Answer 2

Art Sir:

Reagieren nicht ganz die Art und Weise arbeiten, die Sie versuchen, es zu benutzen ... Nun, es wird es verwenden, wenn Sie das CDN in den Header auf dem Index laden. html. Wenn Sie reactstrap oder react-bootstrap verwenden, würden Sie sie als benutzerdefinierte Komponente laden.

Um eine Schaltfläche zu laden in reagieren-Bootstrap, würden Sie es zuerst importieren:

import {Button} from 'react-bootstrap'

und in Ihrem Code Sie es so nennen würde:

<Button bsStyle="warning" bsSize="large"> Button! </Button>

dies die react-Methode zum Aufrufen von etwas, was Sie in normalen HTML tun würde, wie folgt:

<button class="btn btn-lg btn-warning> Button! </button>

Sie müssen immer noch die CSS von entweder lokal oder die CDN in der index.html (normalerweise in der öffentlichen/index.html gehalten).

https://react-bootstrap.github.io/components.html