Javascript 如何在react.js项目的引导导航栏中放置glyphicon

如何在引导导航栏中显示glyphicon？我有一个React.js项目，我一直在工作，我想将GitHub图标重新定位到导航栏。到目前为止，我有一些东西看起来像下面

与App.js中导航栏相关的代码

import React, {PropTypes} from 'react';
import NavBar from './common/NavBar-test';
import FontAwesome from 'react-fontawesome';

var navbar = {};
navbar.brand =  {linkTo: "#", text: "app"};
navbar.links = [

  {linkTo: "#Demonstration", text: "Demonstration"},
  {linkTo: "#Demonstration2", text: "Demonstration #2"},
  {linkTo: "https://github.com/user/app", text:"GitHub Source Code"},
  {linkTo: "https://itunes.apple.com/us/app/", text: "App Store"},
  {linkTo: "https://github.com/user/appr", text: "The Future of app"}
];

import React, { PropTypes } from 'react';

// create classes
var NavBar = React.createClass({
  render: function(){
    return(
      <nav className="navbar navbar-default 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} icon={link.icon} />
        );
      }
      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}{this.props.icon}</a>  
      </li>
    );
  }
});

export default NavBar;

和Navbar test.js

import React, {PropTypes} from 'react';
import NavBar from './common/NavBar-test';
import FontAwesome from 'react-fontawesome';

var navbar = {};
navbar.brand =  {linkTo: "#", text: "app"};
navbar.links = [

  {linkTo: "#Demonstration", text: "Demonstration"},
  {linkTo: "#Demonstration2", text: "Demonstration #2"},
  {linkTo: "https://github.com/user/app", text:"GitHub Source Code"},
  {linkTo: "https://itunes.apple.com/us/app/", text: "App Store"},
  {linkTo: "https://github.com/user/appr", text: "The Future of app"}
];

import React, { PropTypes } from 'react';

// create classes
var NavBar = React.createClass({
  render: function(){
    return(
      <nav className="navbar navbar-default 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} icon={link.icon} />
        );
      }
      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}{this.props.icon}</a>  
      </li>
    );
  }
});

export default NavBar;

import React，{PropTypes}来自'React'；
//创建类
var NavBar=React.createClass({
render:function（）{
返回(
切换导航
);
}
});
var NavBrand=React.createClass({
render:function（）{
返回(
);
}
});
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（）{
返回(


);
}
});
导出默认导航栏；

---

理想情况下，我希望将GitHub Glyph图标放在表示GitHub源代码的文本前面。

看起来您正在链接上进行映射（这很酷），但您可以在映射的链接之前添加所需的GitHub数据

你可能会得到这样的结果：

<span>
    <NavLink>GitHub Source Code</NavLink>
    <GlyphIcon />
</span>
// Then map over links here

GitHub源代码
//然后在这里映射链接

简而言之，我终于得到了图示符图标来显示我希望它们如何显示

我需要修改

Navbar测试的源代码以支持图标

大概

class NavMenu extends React.Component {
  render() {
    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} icon={link.icon} />
        );
      }
      else {
        return (
          <NavLink key={link.text} linkTo={link.linkTo} icon={link.icon} text={link.text} active={link.active}  />
        );
      }
    });
    return (
      <ul className="nav navbar-nav">
        {links}
      </ul>
    ); // close return
  } // close render
} // close NavMenu

类导航菜单扩展了React.Component{
render（）{
var links=this.props.links.map（函数（链接）{
如果（链接下拉列表）{
返回(
);
}
否则{
返回(
);
}
});
返回(

{links}

)；//结束返回
}//关闭渲染
}//关闭导航菜单