如何正确获取的日期和时间？

Question

我是新来的反应，并试图得到实际的日期和时间，但我无法弄清楚如何这样做:(

可能有人请帮助我！

我试图让在日。初始状态和实现它的每一秒当我运行它，我得到一个白色的屏幕

import React from 'react'; 
import './Menubar.css'; 
import Time from 'react-time'; 

const Menubar = React.createClass({ 
getInitialState() { 
    return { 
     now: new Date().now(), 
    }; 
}, 

getRealTime: function() { 
    this.setState(
     { 
      now: new Date().now(), 
     }) 
}, 

/** 
* Render the Menubar component 
* @return {Component} the App Component rendered 
*/ 
render() { 
    setInterval(this.getRealTime(), 1000); 
    return (
     <div className="Menubar"> 
      <ul className="Menubar-menu"> 
       <div className=""> 
        <li className="Menubar-name">login name</li> 
        <li className="Menubar-date"><Time value={this.state.now} format="DD/MM/YYYY" /></li> 
        <li className="Menubar-time"><Time value={this.state.now} format="HH:mm:ss" /></li> 
       </div> 
      </ul> 
     </div> 
    ); 
} 
}); 

export default Menubar; 

Answer 1

两件事情：

1. new Date().now()是不是一个功能，new Date()返回当前的日期和时间，所以没有必要添加。
2. 您尝试设置渲染功能内的状态（调用getRealTime每一个渲染，这会导致重新绘制）。据我了解，你要每一秒更新一次。你可以设置起来componentDidMount。

这里是有固定的那些东西你MenuBar组件。我也清除组件卸载的时间间隔：

const Menubar = React.createClass({ 
    getInitialState() { 
    return { 
     now: new Date(), 
    }; 
    this.interval = null; 
    }, 

    componentDidMount: function() { 
    const self = this; 
    self.interval = setInterval(function() { 
     self.setState({ 
     now: new Date(), 
     }); 
    }, 1000); 
    }, 

    componentWillUnmount: function() { 
    clearInterval(this.interval); 
    }, 

    render() { 
    return (
     <div className="Menubar"> 
     <ul className="Menubar-menu"> 
      <div className=""> 
      <li className="Menubar-name">login name</li> 
      <li className="Menubar-date"><Time value={this.state.now} format="DD/MM/YYYY" /></li> 
      <li className="Menubar-time"><Time value={this.state.now} format="HH:mm:ss" /></li> 
      </div> 
     </ul> 
     </div> 
    ); 
    } 
});