如何向ReactJS组件添加多个类? [英] How to add multiple classes to a ReactJS Component?
本文介绍了如何向ReactJS组件添加多个类?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是ReactJS和JSX的新手,下面的代码有一些问题.
I am new to ReactJS and JSX and I am having a little problem with the code below.
我试图在每个li
的className
属性中添加多个类:
I am trying to add multiple classes to the className
attribute on each li
:
<li key={index} className={activeClass, data.class, "main-class"}></li>
我的React组件是:
My React component is:
var AccountMainMenu = React.createClass({
getInitialState: function() {
return { focused: 0 };
},
clicked: function(index) {
this.setState({ focused: index });
},
render: function() {
var self = this;
var accountMenuData = [
{
name: "My Account",
icon: "icon-account"
},
{
name: "Messages",
icon: "icon-message"
},
{
name: "Settings",
icon: "icon-settings"
}
/*{
name:"Help & Support <span class='font-awesome icon-support'></span>(888) 664.6261",
listClass:"no-mobile last help-support last"
}*/
];
return (
<div className="acc-header-wrapper clearfix">
<ul className="acc-btns-container">
{accountMenuData.map(function(data, index) {
var activeClass = "";
if (self.state.focused == index) {
activeClass = "active";
}
return (
<li
key={index}
className={activeClass}
onClick={self.clicked.bind(self, index)}
>
<a href="#" className={data.icon}>
{data.name}
</a>
</li>
);
})}
</ul>
</div>
);
}
});
ReactDOM.render(<AccountMainMenu />, document.getElementById("app-container"));
推荐答案
如果有,我使用类名决定(不)使用的类所需的大量逻辑. 过于简单的示例:
I use classnames when there is a fair amount of logic required for deciding the classes to (not) use. An overly simple example:
...
var liClasses = classNames({
'main-class': true,
'activeClass': self.state.focused === index
});
return (<li className={liClasses}>{data.name}</li>);
...
也就是说,如果您不想包含依赖项,那么下面会有更好的答案.
That said, if you don't want to include a dependency then there are better answers below.
这篇关于如何向ReactJS组件添加多个类?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文