Javascript 使用react.js显示引导导航栏_Javascript_Twitter Bootstrap_Reactjs

Javascript 使用react.js显示引导导航栏

javascript twitter-bootstrap reactjs

Javascript 使用react.js显示引导导航栏,javascript,twitter-bootstrap,reactjs,Javascript,Twitter Bootstrap,Reactjs,我有一个非常简单的React.js项目，我试图在项目中添加一个引导导航栏，但我似乎不知道如何让导航栏显示在页面上。我引用的导航栏示例可以在这里找到该项目如下所示： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca

我有一个非常简单的React.js项目，我试图在项目中添加一个引导导航栏，但我似乎不知道如何让导航栏显示在页面上。我引用的导航栏示例可以在这里找到

该项目如下所示：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <title>My super cool title.</title>
</head>
<body>
  <div id="root"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="bundle.js" ></script>
</body>
</html>


我超级酷的头衔。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';

ReactDOM.render(<App />, document.getElementById('root'));

import React, {PropTypes} from 'react';
import styles from './App.css';
import NavBarTest from './common/NavBar-test';

const App = () => {
  return (
    <div id="parent">
      <div>Hello, App!</div>
      <NavBarTest {...NavBarTest} />
    </div>
  )
}

export default App;

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

export default NavBar;

从“React”导入React；
从“react dom”导入react dom；
从“./components/App.js”导入应用程序；
ReactDOM.render(
);
}
});
var NavMenu=React.createClass({
render:function（）{
var links=this.props.links.map（函数（链接）{
如果（链接下拉列表）{
返回(
);
}
否则{
返回(
);
}
});
返回(

{links}

);
}
});
var NavLinkDropdown=React.createClass({
render:function（）{
var-active=false；
var links=this.props.links.map（函数（链接）{
如果（link.active）{
主动=真；
}
返回(
);
});
返回(


{links}


);
}
});
var NavLink=React.createClass({
render:function（）{
返回(

);
}
});
//设置数据
var navbar={}；
navbar.brand=
{链接到：“#”，文本：“React Bootstrap Navbar”}；
navbar.links=[
{链接到：“#”，文本：“链接1”}，
{链接到：“#”，文本：“链接2”}，
{dropdown:true，文本：“dropdown”，链接：[
{链接到：“#”，文本：“下拉链接1”}，
{链接到：“#”，文本：“下拉链接2”，活动：true}
]}
];
导出默认导航栏；

最后，页面显示为呈现，但我在浏览器控制台中看到以下错误/警告消息。如果您能帮助我在页面上显示这个导航栏，我们将不胜感激

根据您显示的结构，您应该在

App

组件中呈现

NavBar

，因为您默认从

NavBar test.js

文件导出

NavBar

。在

NavBar

组件中，您正在通过

this.props.brand

访问值，因此您需要在

app.js

文件中定义

var-NavBar

数据（您在app.js的最后一个文件中定义的数据），在

app.js

文件中使用它，它将起作用：

import React, {PropTypes} from 'react';
import styles from './App.css';
import NavBar from './common/NavBar-test';

const App = () => {
  return (
    <div id="parent">
      <div>Hello, App!</div>
      <NavBar {...navbar}/>
    </div>
  )
}

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

import React，{PropTypes}来自'React'；
从“/App.css”导入样式；
从“./common/NavBar test”导入导航栏；
常量应用=（）=>{
返回(
你好，应用程序！
)
}
var navbar={}；
navbar.brand={
链接至：“#”，
文本：“反应引导导航栏”
};
navbar.links=[
{
链接至：“#”，
正文：“链接1”
},
{
链接至：“#”，
正文：“链接2”
},
{
下拉列表：正确，
文本：“下拉列表”，
链接：[
{
链接至：“#”，
文本：“下拉链接1”
},
{
链接至：“#”，
文字：“下拉链接2”，
主动：正确
}
]
}
];

检查工作代码：

如果这是为了学习，请继续创建所有代码！否则我建议使用

react引导
看起来您在几个地方使用了linkTo
。在尝试访问NavBar
上的属性之前，请确保定义了brand
。在访问NavMenu
上的属性之前，请确保link
是在NavMenu
中定义的。我尝试了您提供的解决方案，但仍然收到相同的错误消息。@克里斯，我提供的解决方案应该有效，请检查代码笔，我认为您犯了一些错误，请再次检查。