如何在一个ReactJS组件中添加多个类？
如何在一个ReactJS组件中添加多个类？
提问于 2015-12-30 09:44:22
我是ReactJS和JSX的新手，我对下面的代码有一点小问题。
我尝试将多个类添加到每个li的className属性中
<li key={index} className={activeClass, data.class, "main-class"}></li>我的React组件是：
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"));回答 25
Stack Overflow用户
发布于 2016-11-27 08:49:14
只需使用JavaScript即可。
<li className={[activeClass, data.klass, "main-class"].join(' ')} />如果要在对象中添加基于键和值的类，可以使用以下方法：
function classNames(classes) {
return Object.entries(classes)
.filter(([key, value]) => value)
.map(([key, value]) => key)
.join(' ');
}
const classes = {
'maybeClass': true,
'otherClass': true,
'probablyNotClass': false,
};
const myClassNames = classNames(classes);
// Output: "maybeClass otherClass"
<li className={myClassNames} />或者更简单：
const isEnabled = true;
const isChecked = false;
<li className={[isEnabled && 'enabled', isChecked && 'checked']
.filter(e => !!e)
.join(' ')
} />
// Output:
// <li className={'enabled'} />Stack Overflow用户
发布于 2016-08-20 18:26:28
合并
不需要花哨，我正在使用CSS模块，这很容易
import style from '/css/style.css';
<div className={style.style1+ ' ' + style.style2} />这将导致：
<div class="src-client-css-pages-style1-selectionItem src-client-css-pages-style2">换句话说，这两种风格
条件句
可以很容易地使用与if相同的想法
const class1 = doIHaveSomething ? style.style1 : 'backupClass';
<div className={class1 + ' ' + style.style2} />ES6
在过去的一年左右，我一直在使用模板文字，所以我觉得它值得一提，我发现它非常有表现力和易读性：
`${class1} anotherClass ${class1}`Stack Overflow用户
发布于 2017-12-02 04:21:34
这可以通过ES6模板文字来实现：
<input className={`base-input-class ${class1} ${class2}`}>(为清楚起见进行了编辑)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34521797
复制相关文章
相似问题