如何在React.js项目中制作Twitter Bootstrap导航栏 [英] How to make a twitter bootstrap navbar in a React.js project
本文介绍了如何在React.js项目中制作Twitter Bootstrap导航栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在我的React.js项目中创建一个Twitter引导 navbar ，但是目前出现以下错误， TypeError:this.props.brand未定义
I would like to make a twitter bootstrap navbar in my React.js project, but I'm presently getting the following error,
TypeError: this.props.brand is undefined
昨晚我发现了此代笔，作者在其中创建了一个导航栏，并实现了以下代码，但仍然出现上述错误.
I found this codepen last night, where the author creates a navbar and I implemented the following code, but I am still getting the above mentioned error.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chrisrjones.com</title>
</head>
<body>
<div id="app"></div>
<div id="hello"></div>
<div id="navbar"></div>
<script src="/bundle.js" ></script>
</body>
</html>
main.js
import React from 'react';
import ReactDOM from 'react-dom';
var Hello = require('./components/hello');
var NavBar = require('./components/navbar');
ReactDOM.render(
<Hello/>,
document.getElementById('hello')
);
ReactDOM.render(
<NavBar/>,
document.getElementById('navbar')
);
navbar.js
var React = require('react');
// import React, { PropTypes } 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}
]}
];
// render NavBar
// React.render(
// <NavBar {...navbar} />,
// document.getElementById("navbar")
// );
module.exports = NavBar
;
推荐答案
问题是，您在所有组件中都使用this.props，但是您没有传递props值，在代码笔示例中，您错过了这一部分:
Issue is, you are using this.props in all component but u are not passing the props values, in the code pen example you missed this part:
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}
]
}
];
将此代码用于 Main.js :
import React from 'react';
import ReactDOM from 'react-dom';
var Hello = require('./components/hello');
var NavBar = require('./components/navbar');
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}
]
}
];
ReactDOM.render(
<Hello/>,
document.getElementById('hello')
);
ReactDOM.render(
<NavBar {...navbar} />,
document.getElementById("navbar")
);
他们正在道具中传递这个物体.在您的代码中进行更改，它将起作用.
They are passing this object in the props. Make the changes in your code it will work.
让我知道您是否需要任何帮助.
Let me know if you need any help.
这篇关于如何在React.js项目中制作Twitter Bootstrap导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
