Question

我刚刚开始学习反应。我想在屏幕上显示一个滴答计时器，时间会每秒更新一次。

现在时间显示页面最初加载时，但它是静态的。控制台中没有错误。我的代码应该怎么办？

以下是我的代码的一部分：

function timer(){
return new Date().toLocaleTimeString()
}
setInterval(timer, 1000);

const element = (
  <div>
  {getGreeting(user)}
  <h1>It is {timer()}.</h1>
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('container')
);

以下是结果的截图： enter image description here

谢谢！

Answer 1

当前显示时间将是您组件的状态。使用setInterval更新状态以触发重新呈现。

更好的是，使用setTimeout并将持续时间设置为下一秒减去当前时间。

以下是一个示例：https://jsfiddle.net/DerekL/3yLneqy7/

class Time extends React.Component {
    constructor(props){
        super(props);
        this.timer = 0;
        this.state = {
            time: new Date()
        };
    }
    componentWillMount(){
        // set up timer
        this.timer = setTimeout(() => {
            this.setState({
                time: new Date()
            });
            this.componentWillMount();
        }, Math.floor(Date.now() / 1000) * 1000 + 1000 - Date.now());
    }
    componentWillUnmount(){
        // remove timer
        clearTimeout(this.timer);
    }
    
    render() {
        // render the current time
        return this.state.time.toLocaleTimeString();
    }
}

class App extends React.Component {
    render() {
        return (
            <span>
                <span>The time is </span>
                <Time/>.
            </span>
        );
    }
}

ReactDOM.render(<App />, document.body);

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

看看你的表现

function timer(){
    return new Date().toLocaleTimeString()
}
setInterval(timer, 1000);

我相信你是JavaScript新手。我建议您在不使用任何库或框架（使用vanilla Javascript）的情况下进行编码，直到您对基础知识充满信心。

Answer 2

    import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
        timer:""
    }
  }


  componentWillMount(){
    setTimeout(()=>{
      this.setState({
        timer: new Date().toLocaleTimeString()
      })
      this.componentWillMount();
    })
  }

  render() {
    return (
      <div className="App">
        <h1>Timer</h1>
        <h1>{this.state.timer}</h1>
      </div>
    );
  }
}

export default App;

反应计时器

2 个答案: