0
私は現在、my React projectに表示するためにtwitterのブートストラップnavbarを取得しようとしていますが、次のエラーが表示されます。 TypeError: this.props.brand is undefinedプロジェクトのTypeError：this.props。定義されていません
ソースファイルは、以下の、
main.js
// console.log('Hello JavaScript!');
// Note: babel-polyfill is used to fill in the gaps between ES5 & ES6.
// ...it is not required.
// import 'babel-polyfill'; //Note: this module is 50K minified.
import React from 'react';
import ReactDOM from 'react-dom'; //Note: when this line is commented out the navbar does not display ???
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import './styles/styles.css'; //Webpack can import CSS files too.
// Note: the below import was causing a syntax error.
// import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import { Link } from 'react-router'
render(
<Router history={browserHistory} routes={routes} />,
document.getElementById('app')
);
App.js
// This component handles the App template used on every page.
import React, {PropTypes} from 'react';
import Header from './common/Header';
// import NavBar from './common/navbar';
import Router from 'react-router';
class App extends React.Component {
render() {
return (
<div className="container-fluid">
<Header/>
{this.props.children}
</div>
);
}
}
App.propTypes = {
children: PropTypes.object.isRequired
};
export default App;
routes.js
のように見えますimport React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/App';
import HomePage from './components/home/HomePage';
import AboutPage from './components/about/AboutPage';
export default (
<Route path="/" component={App}>
<IndexRoute component={HomePage} />
<Route path="about" component={AboutPage} />
</Route>
);
navbar.js
// var React = require('react');
import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import { browserHistory, Router, Route } from 'react-router'
// var ReactDOM = require('react-dom');
// import React, { PropTypes } from 'react';
// create classes
var NavBar = React.createClass({
render: function(){
return(
<nav className="navbar navbar-inverse navbar-static-top">
<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 key={link.text} links={link.links} text={link.text} active={link.active} />
);
}
else {
return (
<NavLink key={link.text} 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 key={link.text} 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;
// export default NavBar;
// export default NavBrand;
なぜ、 'App'内に' NavBar'をレンダリングしていませんか？ – Jack
@Jack私の悪い、私は早かったが、それは私に上記のエラーを与えていた。 – Chris
NavBarはここでうまく動作しています：https://jsfiddle.net/mrlew/z47j8ppw/。ただし、 'React.Render'の代わりに' ReactDOM.render'を使わなければなりません。おそらく 'App'からレンダリングしているときに、あなたは' props'を渡していないでしょう。 – mrlew