Reactjs 日期之间的实时时间

我想弄清楚如何制作一个实时计数器，在不刷新页面的情况下增加秒数。下面是我的代码。我对使用ReactJS非常陌生，如有任何提示/帮助，将不胜感激。谢谢

import './Home.css';
import React, { Component } from 'react';
import Moment from 'react-moment';

export default class Home extends Component {
    render() {
        var date = new Date();
        const together = "2017-05-14T06:30";


        return (
            <div>
                <p><Moment interval={1000} diff={together} unit="seconds">{date}</Moment> Seconds</p>
                <p><Moment diff={together} unit="minutes">{date}</Moment> Minutes</p>
                <p><Moment diff={together} unit="days">{date}</Moment> Days</p>
                <p><Moment diff={together} unit="months">{date}</Moment> Months</p>
                <p><Moment diff={together} unit="years" decimal>{date}</Moment> Years</p>
            </div>
        );
    }
}

导入“/Home.css”； 从“React”导入React，{Component}； 从“反应力矩”导入力矩； 导出默认类Home extends组件{ render（）{ 变量日期=新日期（）； 共同施工=“2017-05-14T06:30”； 返回( {date}秒

{date}分钟

{date}天

{date}个月

{date}年

); } }

---

官方文件中有一个例子

但要点是您需要使用

setInterval

来更新组件的状态。这将导致组件在不刷新页面的情况下重新呈现

在您的情况下，您可能希望将

date

保存到状态的组件（例如，在构造函数中），然后从呈现中的状态读取它。然后使用

setInterval

每秒更新一次状态

import './Home.css';
import React, { Component } from 'react';
import Moment from 'react-moment';

export default class Home extends Component {
    constructor() {
         this.state.date = new Date();
    }
    updateTime(){
        var date = this.state.date
        this.setState({date: date.setSeconds(date.getSeconds() + 1);
    }
    componentDidMount(){
        setInterval(this.updateTime, 1000);
    }
    render() {
        const together = "2017-05-14T06:30";


        return (
            <div>
                <p><Moment interval={1000} diff={together} unit="seconds">{this.state.date}</Moment> Seconds</p>
                 // etc.  Everywhere you had date becomes this.state.date
            </div>
        );
    }
}

导入“/Home.css”； 从“React”导入React，{Component}； 从“反应力矩”导入力矩； 导出默认类Home extends组件{ 构造函数（）{ this.state.date=新日期（）； } 更新时间（）{ 变量日期=this.state.date this.setState（{date:date.setSeconds（date.getSeconds（）+1）； } componentDidMount（）{ setInterval（this.updateTime，1000）； } render（）{ 共同施工=“2017-05-14T06:30”； 返回( {this.state.date}秒

//等等，你约会过的地方都变成了这个州 ); } }