[英]display bootstrap navbar using react.js
I have a very simple React.js project where I am trying to add a bootstrap navbar to the project, but I can't seem to figure out how to get the navbar to display on the page. 我有一个非常简单的React.js项目,我试图在项目中添加一个bootstrap导航栏,但我似乎无法弄清楚如何让导航栏显示在页面上。 The navbar example I am referencing can be found here, http://codepen.io/zhaozhiming/pen/LNGyvR
我可以在这里找到我引用的导航栏示例, http://codepen.io/zhaozhiming/pen/LNGyvR
The project looks like the following, 该项目如下所示,
index.html 的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>My super cool title.</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="bundle.js" ></script>
</body>
</html>
index.js index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
ReactDOM.render(<App />, document.getElementById('root'));
App.js App.js
import React, {PropTypes} from 'react';
import styles from './App.css';
import NavBarTest from './common/NavBar-test';
const App = () => {
return (
<div id="parent">
<div>Hello, App!</div>
<NavBarTest {...NavBarTest} />
</div>
)
}
export default App;
Navbar-test.js 导航栏,test.js
import React from 'react';
// create classes
var NavBar = React.createClass({
render: function(){
return(
<nav className="navbar navbar-inverse">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} />
</div>
<div className="collapse navbar-collapse" id="navbar-collapse">
<NavMenu links={this.props.links} />
</div>
</div>
</nav>
);
}
});
var NavBrand = React.createClass({
render: function(){
return (
<a className="navbar-brand" href={this.props.linkTo}>{this.props.text}</a>
);
}
});
var NavMenu = React.createClass({
render: function(){
var links = this.props.links.map(function(link){
if(link.dropdown) {
return (
<NavLinkDropdown links={link.links} text={link.text} active={link.active} />
);
}
else {
return (
<NavLink linkTo={link.linkTo} text={link.text} active={link.active} />
);
}
});
return (
<ul className="nav navbar-nav">
{links}
</ul>
);
}
});
var NavLinkDropdown = React.createClass({
render: function(){
var active = false;
var links = this.props.links.map(function(link){
if(link.active){
active = true;
}
return (
<NavLink linkTo={link.linkTo} text={link.text} active={link.active} />
);
});
return (
<li className={"dropdown " + (active ? "active" : "")}>
<a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{this.props.text}
<span className="caret"></span>
</a>
<ul className="dropdown-menu">
{links}
</ul>
</li>
);
}
});
var NavLink = React.createClass({
render: function(){
return(
<li className={(this.props.active ? "active" : "")}><a href={this.props.linkTo}>{this.props.text}</a></li>
);
}
});
// set data
var navbar = {};
navbar.brand =
{linkTo: "#", text: "React Bootstrap Navbar"};
navbar.links = [
{linkTo: "#", text: "Link 1"},
{linkTo: "#", text: "Link 2"},
{dropdown: true, text: "Dropdown", links: [
{linkTo: "#", text: "Dropdown Link 1"},
{linkTo: "#", text: "Dropdown Link 2", active: true}
]}
];
export default NavBar;
Finally, the page appears to render, but I am seeing the following error / warning message in the browser console. 最后,页面似乎呈现,但我在浏览器控制台中看到以下错误/警告消息。 Any help on how I can get this navbar to display on the page would greatly be appreciated.
任何有关如何让这个导航栏显示在页面上的帮助将非常感激。
According to the structure you showed, you should render NavBar
in App
component because you are default exporting NavBar
from Navbar-test.js
file. 根据您显示的结构,您应该在
App
组件中呈现NavBar
,因为您是默认从Navbar-test.js
文件导出NavBar
。 One more this in NavBar
component you are accessing the values by this.props.brand
so you need to define the var navbar
data ( data that you defined in the last of app.js file ) in app.js
file, Use this in app.js
file, it will work: 还有一个在
NavBar
组件中你正在通过this.props.brand
访问这些值,所以你需要在app.js
文件中定义var navbar
数据( 你在app.js文件的最后一个文件中定义的数据 ),在app.js
使用它app.js
文件,它会工作:
import React, {PropTypes} from 'react';
import styles from './App.css';
import NavBar from './common/NavBar-test';
const App = () => {
return (
<div id="parent">
<div>Hello, App!</div>
<NavBar {...navbar}/>
</div>
)
}
var navbar = {};
navbar.brand = {
linkTo: "#",
text: "React Bootstrap Navbar"
};
navbar.links = [
{
linkTo: "#",
text: "Link 1"
},
{
linkTo: "#",
text: "Link 2"
},
{
dropdown: true,
text: "Dropdown",
links: [
{
linkTo: "#",
text: "Dropdown Link 1"
},
{
linkTo: "#",
text: "Dropdown Link 2",
active: true
}
]
}
];
Check the working code: http://codepen.io/zhaozhiming/pen/LNGyvR?editors=0010 检查工作代码: http : //codepen.io/zhaozhiming/pen/LNGyvR?edit = 0010
If this is for learning then do go ahead and create them all! 如果这是为了学习,那么请继续创建它们! Else I will suggest using
react-bootstrap
否则我会建议使用
react-bootstrap
https://react-bootstrap.github.io/components/navbar/ https://react-bootstrap.github.io/components/navbar/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.