Question

我想在我的React.js项目中创建一个twitter bootstrap navbar，但我现在收到以下错误， TypeError: this.props.brand is undefined

昨晚我找到了this codepen，作者创建了一个导航栏并实现了以下代码，但我仍然遇到了上述错误。

的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

Answer 1

问题是，你在所有组件中使用this.props但是你没有传递道具值，在代码笔示例中你错过了这部分：

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")
);

他们在道具中传递此对象。在代码中进行更改将会起作用。

如果您需要帮助，请告诉我。

如何在React.js项目中制作一个twitter bootstrap导航栏

1 个答案: