reactjs - 使用三元运算符 react 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' : '')}>;
 }