Javascript 在React中秒表每秒旋转秒数

我将在React中结束秒表项目，并且在countTimers方法中定义的每秒的秒数旋转方面存在问题。我用0（度）定义了旋转状态。然后，setInterval中的in COUNTRIMERS功能将旋转状态更改为360（度），之后，条件为：

如果（this.state.seconds>0 | | this.state.seconds<60&&this.state.rotation==360）

尝试每秒执行转换，并在每次转换后将旋转状态设置为0（度）

import React，{Component}来自'React'；
类计时器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
计数：0，
停顿：是的，
轮换：0
};
}
componentDidMount（）{
这是countTimers（）；
}
计数计时器=（）=>{
let counter=setInterval（（）=>{
如果（！this.state.pause）{
这是我的国家({
计数：this.state.count+1，
轮换：360
});
如果（this.state.seconds>0 | | this.state.seconds<60&&this.state.rotation==360）{
document.querySelector（'.seconds'）.style.transition=“所有0.1s轻松”；
document.querySelector（'.seconds'）.style.transform=“rotateX（360deg）”；
}
这是我的国家({
轮换：0
});
}
}
, 1000);
}
startHandler=（）=>{
这是我的国家({
暂停：错
})
}
pauseHandler=（）=>{
这是我的国家({
停顿：是的
})
}

在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;

render（）{
let days=数学地板（this.state.count/（1*60*60*24））；
让小时数=数学楼层（（this.state.count%（1*60*60*24））/（1*60*60））；
让分钟数=数学地板（（this.state.count%（1*60*60））/（1*60））；
设秒数=数学地板（（this.state.count%（1*60））/1）；
返回(
{‘秒表}
{天}：
{小时}：
{分钟}：
{秒}
开始
暂停
);
}
}
导出默认定时器；

---

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

您遇到了许多问题，首先，状态中不存在秒数，因此更改旋转的条件永远不会返回真值。接下来，您需要将spans display css属性设置为

inline block

。最后，我们使用React！无需直接操作元素样式，在渲染函数中操作效果很好，反应性更强

运行下面的代码段以查看它是否正常工作

类计时器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
计数：0，
停顿：是的，
轮换：0
};
}
componentDidMount（）{
这是countTimers（）；
}
计数计时器=（）=>{
let counter=setInterval（（）=>{
如果（！this.state.pause）{
这是我的国家({
计数：this.state.count+1，
旋转：this.state.rotation==359.9？0:359.9，
});
}
}, 1000);
}
startHandler=（）=>{
这是我的国家({
暂停：错
})
}
pauseHandler=（）=>{
这是我的国家({
停顿：是的
})
}
render（）{
const{rotation，count}=this.state；
让天数=数学下限（计数/（1*60*60*24））；
让小时数=数学楼层（（计数%（1*60*60*24））/（1*60*60））；
让分钟数=数学楼层（（计数%（1*60*60））/（1*60））；
让秒数=数学楼层（（计数%（1*60））/1）；
返回(
{‘秒表}
{天}：
{小时}：
{分钟}：
{秒}
开始
暂停
);
}
}
ReactDOM.render（<
计时器/>，
document.getElementById（“react”）
);
。秒{
显示：内联块；
转换：转换500ms；
}
谢谢Ted，它正在工作。不将纯JS注入React代码是正确的。Span是默认的内联元素，所以我没有在这里添加它，当然也不是我的timer.css文件，因为它太长了。在可能的情况下，我总是试图逃避很多状态变化。我的想法是，当它们达到定量极限时，每一秒、每一分钟、每一小时、每一天都要轮换一次。
    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;