Question

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

  static Map<Long,Car> carDb = [(1l): new Car(
            1, UUID.fromString("d3bdc4ea-4c62-4bd2-a751-681a531f34f4"),
            new CarType(10, UUID.fromString("ba4dc4ea-4c62-4bd2-a751-681a531f3487"), "Sedan", "SEDAN"),
            "Toyota", "Corolla"),
        (2l): new Car(
            2, UUID.fromString("45a148b9-a44b-41c2-8ad4-c3b5069f091a"),
            new CarType(11, UUID.fromString("b68148b9-a44b-41c2-8ad4-c3b5069f0922"), "Sport Utility Vehicle", "SUV"),
            "Honda", "CRV"),
        (3l): new Car(
            3, UUID.fromString("fe9ede26-886a-4bd9-9b09-535387fffe88"),
            new CarType(12, UUID.fromString("5a5ede26-886a-4bd9-9b09-535387fffe10"), "Truck", "TRUCK"),
            "Chevy", "Silverado")
    ]

但它不断添加.map(function(list, index) { <div className={"myClass " + (position === index ? 'active' : null)}> }作为类，最终结果如下：

null

这是一个简单的例子，只有2个类名，所以我可以用默认的类名替换<div class="myClass active">... <div class="myClass 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' : '')}>;
 }

Answer 2

如果您有多个类，可以考虑从数组中构建类列表：

IF ISNULL{first_priority_field_name} OR {first_priority_field_name} = '' THEN 
{second_priority_field_name}
ELSE
{first_priority_field_name}

你也可以考虑使用一个帮助函数来生成一个像这样的对象的var classes = ["myClass"]; if (position === index) { classes.push('active'); } return ( <div className={classes.join(' ')}> ... </div> );字符串：

className

classnames是一个这样的工具（不是唯一的）。

使用三元运算符react className添加类＆＃39; null＆＃39;

2 个答案: