javascript - 类型错误 : this. Prop 。未定义

Question

我目前正在尝试让 Twitter Bootstrap 导航栏显示在 my React project 中，但我收到以下错误， 类型错误:this.props.brand未定义。

该项目的源文件如下所示，

ma​​in.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;

Answer 1

代替 NavBar 的 React.render 使用它，如下所示:

import React, {PropTypes} from 'react';
import Header from './common/Header';
import NavBar from './common/navbar';
import Router from 'react-router';

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}
    ]}
];

class App extends React.Component {
    render() {
        return (
            <div className="container-fluid">
                <NavBar {...navbar}/>
                <Header/>
                {this.props.children}
            </div>
        );
    }
}

App.propTypes = {
    children: PropTypes.object.isRequired
};

export default App;

并从 navbar.js 中删除这些行:

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}
  ]}
];


React.render(
  <NavBar {...navbar} />,
  document.getElementById("navbar")
);

它会起作用，如果您需要任何帮助，请告诉我。