반응 프로젝트에서 twbs 글리프 아이콘을 사용하는 방법

Question

내가 작업중인 프로젝트에 대한 twbs navbar를 성공적으로 만들었습니다. 그러나, 나는 레이블이 NavLinkDropDown Contribute를 A A twbs에 포함되어 가입

[로그인/링크를 가입 두 개의 서로 다른 glyphicons, 1) 로그인 2)를 추가하고 싶습니다.

브라우저에서 렌더링 할 때 링크와 드롭 다운이 다음과 같이 보입니다.

다음 글리프콘을 프로젝트에 추가하고 싶습니다.

그래서 조금 인터넷 검색 내가 navbar.js 파일로 glyphicons를 가져하기 위해 프로젝트를 반응 내 추가 this gist를 반환.

전체 navbar.js

내가 수정하지만, glyphicons가 표시되지 않는 것은 보이는있어 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

App.js의 항목에 Glyphs를 추가했을 것입니다. 여기에 당신의 드롭 다운 코드

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') 
);