如何使在React.js項目

我想作一個Twitter的引導我React.js項目navbar一個Twitter的引導導航欄，但我目前收到以下錯誤， TypeError: this.props.brand is undefined如何使在React.js項目

我發現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

;

來源

2017-02-03 Chris

的問題是，你正在使用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") 
);

他們在道具中傳遞此對象。在您的代碼中進行更改即可使用。

讓我知道你是否需要任何幫助。

來源

2017-02-03 17:42:23

我有一個代碼塊，你在我的例子'是你有一部分navbar.js' – Chris

提，但你不能傳遞，在道具，像codepen例子是幹什麼的，我覺得你的新反應，道具是從外部傳遞的值，比如通過父路徑到子路徑，所以您需要在NavBar中傳遞此對象。 –

使用this.props.brand檢查NavBar的comp，但它沒有得到任何道具，所以拋出提到的錯誤。將數據放在Main.js中，並將這些值傳遞給道具，它將工作:) –

如何使在React.js項目

回答

相關問題