如何在反应项目中使用twbs glyphicon

Question

我已成功设法为我正在处理的项目创建twbs导航栏。不过，我想补充两个不同glyphicons， 1）登录 2）注册

的登录/注册链接中包含有一个是拼焊板标记NavLinkDropDown贡献。

当在浏览器中呈现时，链接和下拉菜单看起来像下面一样。

我想添加下面的glyphicons到项目中。

那么一点点谷歌搜索返回this gist，我加入到我在为进口glyphicons到navbar.js文件反应项目。

整个navbar.js

而且一块navbar.js我正在修改，但没有看到glyphicons样子的，

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><span>{User}</span><span>{Login}</span> 
     </a> 
     <ul className="dropdown-menu"> 
      {links} 
     </ul> 
     </li> 
    ); 
    } 
}); 

而且它目前的样子，

Answer 1

我可能会在App.js中为这些项目添加字形。

navbar.links = [ 
    {linkTo: "/about", text: "About Me"}, 
    {linkTo: "/contact", text: "Contact"}, 
    {dropdown: true, text: "Contribute", links: [ 
     {linkTo: "signup", text: "Sign Up", icon: User }, 
     {linkTo: "login", text: "Login" } 
    ]} 
]; 

然后在你这里下拉代码，你可以把在地方的图标：

return (
    <NavLink key={link.text} linkTo={link.linkTo} text={link.text} 
    active={link.active} {link.icon}/> 
); 

我做了更新按钮演示here

const User = <span className='glyphicon glyphicon-user' /> 

var TLink = React.createClass({ 
    render: function() { 
    return (this.props.icon); 
    } 
}); 

var TButton = React.createClass({ 
    render: function() { 
    return (<button type="button" className="btn btn-default btn-lg"> 
    <TLink icon={this.props.icon}/>{this.props.name} 
    </button>); 
    } 
}); 

ReactDOM.render(
    <TButton icon={User} name="Test"/>, 
    document.getElementById('example') 
);