ReactJs：如何使用if else一起改变多个div的颜色

debugcn 发表于 Dev

塔米

我需要一些建议，如何使用if-else条件相应地更新多个div的颜色。我正在创建一个进度条，其中的值将异步更改，因此要相应地更改div。

例如：如果value是1到10，则第一个div将被着色；如果value是10到20，则div 1和div 2都需要着色，依此类推。请任何帮助/建议。

代码

class TestPage extends Component {

  constructor(props) {
    super(props)
    
    this.divStyle = {
      backgroundColor: "lightgray"
    } 
        
  }

  progressValue(value) {
    if(value >= 0 && value <= 10){
      
      this.divStyle = {
        backgroundColor: "red"
        } 
      
    } else if (value >= 10 && value <= 20) {
      this.divStyle = {
        backgroundColor: "green"
        } 
    }
  }

  render() {
    const value = 30 ;
    this.progressValue(value);
    
    return (
          <div class="container">
            <div class="progress-segment">
              <div class="item " id="item" style={this.divStyle}></div>
              <div class="item "></div>
              <div class="item "></div>
              <div class="item "></div>
              <div class="item"></div>
              <div class="item "></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item "></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>
              <div class="item"></div>

            </div>
          </div>
          
     );
  }
}

export default  withStyles(styles)(TestPage);

设计

请让我知道这是否也是处理此类案件的最佳方法

Gmoniava

下面，我将向您展示一种基于变量的惯用方式来计算样式。这也是一种进度条的示例实现：

 const SIZE = 30;

export default class Counter extends Component {
  state = {
    count: 0
  };

  decrementCount = () => {
    this.setState((state, props) => ({
      count: state.count > 0 ? state.count - 1 : state.count
    }));
  };

  incrementCount = () => {
    this.setState((state, props) => ({
      count: state.count < SIZE ? state.count + 1 : state.count
    }));
  };

  render() {
    return (
      <div>
        {this.state.count}
        <div style={{ display: "flex" }}>
          {Array(3)
            .fill(0)
            .map((x, i) => {
              return (
                <div
                  style={{
                    width: 10,
                    height: 10,
                    margin: 5,
                    background:
                      this.state.count > i * 10 &&
                      i < (this.state.count + 1) * 10
                        ? "green"
                        : "white"
                  }}
                />
              );
            })}
        </div>
        <button onClick={this.decrementCount}>-</button>
        <button onClick={this.incrementCount}>+</button>
      </div>
    );
  }
}