react.jsプロジェクト内のブートストラップnavbarにグリフコンを配置する方法

Question

ブートストラップのナビゲーションバーにグリフコンを表示するにはどうすればよいですか？私はReact.jsプロジェクトを手がけており、GitHubグリフコンをnavbarに移したいと思っています。これまでのところ私は以下のようなものを持っています。

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; 

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

そしてナビゲーションバー-test.jsにナビゲーションバーに関連するコードを理想的には、私はGitHubのを配置したいのですがグリフコンは、テキストの前に表示されますGitHubソースコード。

Answer 1

を、私は最終的に、私は彼らがしたいどのように表示するglyphiconsを得ました。

アイコンをサポートするように、Navbar-testのソースを変更する必要がありました。

何かのように、

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 

Answer 2

あなたはリンク上にマッピングされているようです（これはクールです）が、マップされたリンクの前にあなたの望むGitHubデータを追加することができます。

あなたはこのようなもので終わるかもしれない。要するに

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