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. The navbar example I am referencing can be found here, http://codepen.io/zhaozhiming/pen/LNGyvR
The project looks like the following,
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
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
ReactDOM.render(<App />, document.getElementById('root'));
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
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. 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:
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
If this is for learning then do go ahead and create them all! Else I will suggest using react-bootstrap
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.