我正在尝试使用如下表达式有条件地将类应用于我的组件：
.map(function(list, index) {
<div className={"myClass " + (position === index ? 'active' : null)}>
}
但它不断添加null为类，最终结果如下：
<div class="myClass active">...
<div class="myClass null">...
这是一个简单的例子，只有 2 个类名，所以我可以null用默认的类名替换。但在更复杂的布局中，我需要一遍又一遍地复制相同的名称。
有没有更好的方法来解决这个问题？
您可以使用空字符串''而不是 null，例如：
.map(function(list, index) {
<div className={"myClass " + (position === index ? 'active' : '')}>
}
另外 map 应该返回一个值：
.map(function(list, index) {
return <div className={"myClass " + (position === index ? 'active' : '')}>;
}
如果您有多个类，您可以考虑从数组构建类列表：
var classes = ["myClass"];
if (position === index) {
classes.push('active');
}
return (
<div className={classes.join(' ')}>
...
</div>
);
您还可以考虑使用一个辅助函数来className从这样的对象生成字符串：
var classes = {
myClass: true,
active: position === index
};
classnames就是这样一种实用程序（不是唯一的一种）。