在 React 中的秒表中每秒旋转秒

Question

我将在 React 中结束我的秒表项目，并且在 countTimers 方法中定义的每一秒的秒数旋转存在问题。我用 0(deg) 定义了旋转状态。然后在 setInterval 中的 countTimers 函数中将旋转状态更改为 360(deg)，然后使用条件： if(this.state.seconds > 0 || this.state.seconds < 60 && this.state.rotation === 360) 尝试每秒执行一次转换，并在每次转换后将旋转状态设置为 0(deg)。

import React, {Component} from 'react';

class Timer extends Component {
    constructor(props){
        super(props);

        this.state = {
            count: 0,
            pause: true,
            rotation: 0
        };
    }

    componentDidMount() {
        this.countTimers();
    }

    countTimers = () => {
        let counter = setInterval(() => {
            if (!this.state.pause) { 
                    this.setState({
                        count: this.state.count + 1,
                        rotation: 360
                    });

                    if(this.state.seconds > 0 || this.state.seconds < 60 && this.state.rotation === 360) {
                        document.querySelector('.seconds').style.transition = "all 0.1s ease";
                        document.querySelector('.seconds').style.transform= "rotateX(360deg)";
                    }

                    this.setState({
                        rotation: 0
                    });
            }
        }
        , 1000);
    }

    startHandler = () => {
        this.setState({
            pause: false
        })
    }

    pauseHandler = () => {
        this.setState({
            pause: true
        })
    }

只完成一次转换，在 componentDidMount 之后点击开始按钮。

    render () {
        let days = Math.floor(this.state.count / (1 * 60 * 60 * 24));
        let hours = Math.floor((this.state.count % (1 * 60 * 60 * 24)) / (1 * 60 * 60));
        let minutes = Math.floor((this.state.count % (1 * 60 * 60)) / (1 * 60));
        let seconds = Math.floor((this.state.count % (1 * 60)) / 1);

        return (
            <div className="Timer">
                <h1>{'STOPWATCH'}</h1>
                <div className="stopwatch-wrapper">
                    <span className="days">{days}:</span>
                    <span className="hours">{hours}:</span>
                    <span className="minutes">{minutes}:</span>
                    <span className={"seconds"}>{seconds}</span>
                </div>
                <div className="buttons-wrapper">
                    <button id="start" onClick={this.startHandler}>START</button>
                    <button id="pause" onClick={this.pauseHandler}>PAUSE</button>
                </div>
            </div>
        );
    }
}

export default Timer;

有人知道如何解决这个问题吗？

Answer 1

你有很多问题，首先seconds 在状态中不存在，所以你改变旋转的条件永远不会返回 true。接下来，您需要将 spans display css 属性设置为inline-block。最后，我们正在使用 React！无需直接操作元素样式，在渲染函数中进行操作就可以了，而且更加 Reacty。

运行下面的 sn-p 来查看它的工作情况

class Timer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0,
      pause: true,
      rotation: 0
    };
  }

  componentDidMount() {
    this.countTimers();
  }

  countTimers = () => {
    let counter = setInterval(() => {
      if (!this.state.pause) {
        this.setState({
          count: this.state.count + 1,
          rotation: this.state.rotation === 359.9 ? 0 : 359.9,
        });
      }
    }, 1000);
  }

  startHandler = () => {
    this.setState({
      pause: false
    })
  }

  pauseHandler = () => {
    this.setState({
      pause: true
    })
  }

  render() {
    const {rotation, count} = this.state;
    let days = Math.floor(count / (1 * 60 * 60 * 24));
    let hours = Math.floor((count % (1 * 60 * 60 * 24)) / (1 * 60 * 60));
    let minutes = Math.floor((count % (1 * 60 * 60)) / (1 * 60));
    let seconds = Math.floor((count % (1 * 60)) / 1); 

    return (
      <div className="Timer">
          <h1>{'STOPWATCH'}</h1>
          <div className="stopwatch-wrapper">
              <span className="days">{days}:</span>
              <span className="hours">{hours}:</span>
              <span className="minutes">{minutes}:</span>
              <span className="seconds" style={{transform: `rotate(${rotation}deg)`}}>{seconds}</span>
          </div>
          <div className="buttons-wrapper">
              <button id="start" onClick={this.startHandler}>START</button>
              <button id="pause" onClick={this.pauseHandler}>PAUSE</button>
          </div>
      </div>
    );
  }
}

ReactDOM.render( <
  Timer / > ,
  document.getElementById("react")
);

.seconds{
  display: inline-block;
  transition: transform 500ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react"></div>