twitter-bootstrap 从 Bootstrap 到 reactjs 的导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39588816/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
navbar from Bootstrap to reactjs
提问by Aaron
I have programmed a navbar using Bootstrap and react. In order to obtain the functionality of bootstrap must be installed and bootstrap.js jquery.js. I just want to basically use the CSS file of bootstrap and the functionality of reactjs. Does it make sense to use Bootstrap with reactjs?
我已经使用 Bootstrap 编写了一个导航栏并做出反应。为了获得bootstrap的功能，必须安装bootstrap.js和jquery.js。我只是想基本上使用bootstrap的CSS文件和reactjs的功能。将 Bootstrap 与 reactjs 一起使用是否有意义？
I need to realize with reactjs a little help to program the navigation.
Here the source of my header. I need help to programm the navbar in reactjs without bootstrap.jsand jquery.min.js
我需要使用 reactjs 来实现对导航进行编程的一些帮助。这是我的标题的来源。我需要帮助在 reactjs 中编程导航栏，而没有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>
);
}
}
回答by Evan Siroky
You can manually code a state variable to handle the toggling of the navbar:
您可以手动编写一个状态变量来处理导航栏的切换：
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>
)
}
}
回答by marcint339
You can easily use bootstrap in your react components by using react-bootstrap package. https://react-bootstrap.github.io/
通过使用 react-bootstrap 包，您可以轻松地在 React 组件中使用引导程序。 https://react-bootstrap.github.io/
This is an example with navbar which you want to use.
这是您要使用的导航栏示例。
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>
);
}
}
