ReactJS 日期之间的实时时间

Question

我正在尝试弄清楚如何制作一个实时计数器来增加秒数而无需刷新我的页面。下面是我的代码。我对使用 ReactJS 很陌生，任何 hints/help 将不胜感激。谢谢..

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

Answer 1

官方 React 文档中有一个这样的例子 https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element

但要点是您需要使用 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>
        );
    }
}

Answer 2

是的，今天尝试我得到了一个很好的解决方案。如果你喜欢它并且工作请给喜欢。谢谢

import React, {useState, useEffect} from "react";
import Moment from "react-moment";
import "moment-timezone";
import moment from "moment";

const Date = () =>{
  const [dateToFormat, setdateToFormat] = useState(moment().toDate().getTime())
  const updateTime = () => {
    let clock = moment().toDate().getTime()
  }
  setInterval(updateTime, 1000)

  useEffect(() => {
    let time = updateTime;
    setdateToFormat(
      time
    );
  },[]);
  
  return(
    <div>
        <Moment interval={1} unit="seconds">
              {dateToFormat}
        </Moment>
    </div>
  )
}


export default Date;

ReactJS 日期之间的实时时间

ReactJS Time between dates in real time

real-time

momentjs

reactjs