用三元运算符反应className添加类'null'

Question

我正在尝试使用如下表达式有条件地将类应用于我的组件:

.map(function(list, index) {
    <div className={"myClass " + (position === index ? 'active' : null)}>
}

但它不断添加null为类,最终结果如下:

<div class="myClass active">...
<div class="myClass null">...

这是一个简单的例子,只有2个类名,所以我可以null用默认的类名替换.但是在更复杂的布局中,我需要一遍又一遍地复制相同的名称.

有没有更好的方法来解决这个问题？

Answer 1

您可以使用空字符串''而不是null,如:

.map(function(list, index) {
    <div className={"myClass " + (position === index ? 'active' : '')}>
}

另外map应该返回一个值:

 .map(function(list, index) {
     return <div className={"myClass " + (position === index ? 'active' : '')}>;
 }