我已成功设法为我正在处理的项目创建twbs导航栏。但是,我想添加两个不同的glyphicons, 1)登录 2)注册
登录/注册链接包含一个标记为Contribute的twbs NavLinkDropDown
。
所以有点谷歌搜索返回this gist,我将其添加到我的反应项目中,以便将字形图导入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>
);
}
});
答案 0 :(得分:0)
我可能会在你的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')
);