Javascript 反应滴答计时器

我最近才开始学习反应。我想在屏幕上显示一个滴答作响的计时器，时间将每一秒更新一次

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

以下是我代码的一部分：

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')
);

函数计时器（）{
返回新日期（）
}
设置间隔（定时器，1000）；
常量元素=(
{getGreeting（用户）}
它是{timer（）}。
);
ReactDOM.render(
元素，
document.getElementById（'容器'）
);

下面是结果的屏幕截图：

---

谢谢

当前显示时间将是组件的状态。使用

setInterval

更新状态以触发重新渲染

更好的方法是使用

setTimeout

并将持续时间设置为下一秒减去当前时间

下面是一个例子：

上课时间延长React.Component{
建造师（道具）{
超级（道具）；
这个计时器=0；
此.state={
时间：新日期（）
};
}
组件willmount（）{
//设置计时器
this.timer=setTimeout（（）=>{
这是我的国家({
时间：新日期（）
});
此.componentWillMount（）；
}，Math.floor（Date.now（）/1000）*1000+1000-Date.now（））；
}
组件将卸载（）{
//移除计时器
clearTimeout（this.timer）；
}
render（）{
//渲染当前时间
返回此.state.time.toLocaleTimeString（）；
}
}
类应用程序扩展了React.Component{
render（）{
返回(
时间到了
.
);
}
}
render（，document.body）

从“React”导入React，{Component}；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
计时器：“
}
}
组件willmount（）{
设置超时（（）=>{
这是我的国家({
计时器：新日期（）.toLocaleTimeString（）
})
此.componentWillMount（）；
})
}
render（）{
返回(
计时器
{this.state.timer}
);
}
}
导出默认应用程序；
虽然代码可能会解决此问题，但答案通常会从解释、代码的作用以及解决问题的原因中获益。这有助于人们更好地理解潜在的问题解决策略。
    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;