如何在反应项目中使用 twbs 字形图标

Question

我已经成功地为我正在处理的项目创建了一个 twbs 导航栏。但是，我想添加两个不同的字形图标， 1) 登录 2) 注册

登录/注册链接包含一个标记为 Contribute 的 twbs NavLinkDropDown。

在浏览器中呈现时，链接和下拉列表如下所示。

我想在项目中添加以下字形图标。

所以，谷歌搜索返回了 this gist，我将其添加到我的 react 项目中，以便将字形图标导入到 navbar.js 文件中。

整个navbar.js

我正在修改的 navbar.js 部分，但没有看到字形图标，

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

我可能会将 Glyphs 添加到您的 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')
);