Question

我有一个数据对象，我想根据条件更改div的颜色

 <Col className="mainbody">                      
      {items.map(data => <CardPanel className="location" 
                         key={data.parkingID}>
                        <div onClick={() => 
                          this.handleClick(data.parkingArea)} >                                                     
                         {data.parkingArea}
                       {data.status == "booked" ? style="color changed to 
                              red" :style= "color changed to red"}
                      <Icon>directions_car</Icon>                               
                        </div>
                    </CardPanel>)}

在{data.status}中，我想检查状态是否为“已预订”，然后更改bgcolor为“红色”

Answer 1

有很多方法可以做到这一点。

在以下代码段中，我们假设条件已事先声明：

const condition = data.status === 'booked';

样式方式

<div style={{ backgroundColor: condition ? "red" : "white" }} />

使用双括号会使您的组件重新渲染很多，因为对象的引用一直在变化。有很多实用程序可以防止这种情况发生，例如fast-memoize。

课堂方式

有几种方法可以有条件地连接className，这是使用ES6的一种方法：

<div className={[
    classNames.card,
    ...(cond && [classNames.booked])
  ]} 
/>

为了代码清晰起见，还有一些库，例如classnames。我个人使用自定义库来编写如下代码：

<div className={cn.concat(classNames.card, [classNames.booked, cond])} />

在scss中，它将允许您这样声明样式：

.card {
    background-color: white;
    transition: background-color .2s ease;

    &.booked {
        background-color: red;
    }
}

Answer 2

您可以使用任何一种内联样式（https://zhenyong.github.io/react/tips/inline-styles.html）或为每种情况分配类名称，并为此添加一个CSS类。对于后面的选项，可以使用类名npm pkg（https://github.com/JedWatson/classnames）

如果使用jsx在地图功能中有条件，如何更改背景色？

2 个答案: