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

你可以用这样的三元运算符

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

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

首先,你不应该使用 class 将类指定给React呈现的元素。你可以在官方网站上看到 Styling and CSS

使用JSX语法,您可以完全访问JavaScript操作符和逻辑。您可以有条件地分配 className 通过传入一个有条件赋值的变量,例如 <div className={circleClass}></div> 或者只是写一个三元内联,比如 <div className={this.state.prediction ? "circle" : "circleSelected"}></div> .

classnames 如果你经常看到这种情况,你应该去看看。

对于更复杂的类列表,您可以创建一个数组,它可能如下所示:

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

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