如何根据JavaScript中变量的值更改CSS类？

Question

我在JavaScript（ReactJS）中有一个变量{this.state.prediction} 。 我想根据{this.state.prediction}的值更改圆形颜色。

特别地，当{this.state.prediction}等于0时，则为div class="circle" ，否则为div class="circleSelected" 。

我该如何实施？

<div>
   <div class="circle-content">
      <div class="circle"></div>
      <p>[0 - 5] ({this.state.prediction})</p>
   </div>
   <div class="circle-content">
      <div class="circle"></div>
      <p>(5 - 15]</p>
   </div>
   <div class="circle-content">
      <div class="circle"></div>
      <p>(15 - 30]</p>
   </div>
</div>

CSS：

.circle-content {
    width:20%;
    text-align:center;
    float:left;
}

.circle {
    display:inline-block;
    width:20%;
    padding-bottom:20%;
    border-radius:60%;
        background: #000;
    border:1px solid #000;
}

.circleSelected {
    display:inline-block;
    width:20%;
    padding-bottom:20%;
    border-radius:60%;
        background: #000;
    border:1px solid #000;
}

.circle-content p {
    font-size:14px;
    color:#fff;
}

Answer 1

库classnames可能会有所帮助。

它为您要执行的操作提供了一些不错的语法：

import React from 'react';
import classNames from 'classnames';


class SomeClass extends React.Component {
  render() {
    <div className={classNames({
      'circle': this.state.prediction === 0,
      'circleSelected': this.state.prediction > 0,
    })}></div>
  }
}

在此处查看文档： https : //github.com/JedWatson/classnames#usage-with-reactjs

Answer 2

你可以这样用三元运算符

<div className={this.state.prediction === 0 ? "circle" : "circleSelected"}></div>

Answer 3

首先，您不应该使用class为React渲染的元素分配类。 您可以在官方样式和CSS文档中阅读有关此内容的信息。

使用JSX语法，您可以完全访问JavaScript运算符和逻辑。 您可以通过传入您有条件分配的变量（例如<div className={circleClass}></div>或通过编写三元内联程序（例如<div className={this.state.prediction ? "circle" : "circleSelected"}></div>来有条件地分配className <div className={this.state.prediction ? "circle" : "circleSelected"}></div> <div className={this.state.prediction ? "circle" : "circleSelected"}></div> 。

这种情况很常见，当您要切换多个类时，它会变得非常复杂。 有一个很好的实用程序库可以帮助您解决这个称为类名的问题 ，您应该检查一下是否经常发生这种情况。

Answer 4

对于更复杂的类列表，您可以创建一个数组，如下所示：

const classesArray = ["defaultClassName"] //or empty if no default class is required
if(anyCondition) {
    classesArray.push("classToBeAdded")
} else if(anyOtherCondition) {
    classesArray.push("anotherClassToBeAdded")}

然后在JSX中，您可以使用：

<div className={classesArray.join(' ')}> 
    Your div text
</div>