javascript - react 滴答计时器

Question

我最近才开始学习react。我希望屏幕上显示一个滴答计时器，并且时间每秒更新一次。

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

这是我的代码的一部分:

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 新手。我建议您在不使用任何库或框架(使用普通 Javascript)的情况下进行编码，直到您对基础知识有信心为止。