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>
  }
}

在此处查看文档：{{3}}

Answer 2

您可以像这样使用三元运算符

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

Answer 3

首先，您不应该使用class将类分配给React渲染的元素。您可以在官方Styling and CSS文档中了解此内容。

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

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

Answer 4

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

yield

然后在JSX中可以使用：

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

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

4 个答案: