ReactJsの特定のクラスを更新できません

Question

React.jsを使用して作成したページのDate Time値を動的に更新しようとしています。参考までに、私は以下の記事から始めました：

https://facebook.github.io/react/docs/rendering-elements.html#react-only-updates-whats-necessary

ただし、日時の値は更新されていません。私は別のクラスとしてShowTimeのを必要とする

var WelcomeMsg = React.createClass({ 
    render : function() 
    { 
    return (
     <div> 
     <h2>Hello , User...</h2> 
     </div> 
    ) 
    } 
}); 

var ShowTime = React.createClass({ 
    render : function() 
    { 
    return (
    <div> 
     <h2>It is {new Date().toLocaleTimeString()}.</h2> 
    </div> 
    ) 

    } 
}); 


var Form=React.createClass({ 
render:function(){ return(
    <div> 
    <WelcomeMsg/> 
    <ShowTime/> 
    </div> 
)} 
}); 

ReactDOM.render(<Form/>,document.body); 
setInterval(ShowTime, 1000); 

： はここに私のコードです。 @Shubhamジェインによって述べたよう

Answer 1

私のコードはES6で実装されています。

class HelloWidget extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.state = { 
      time: new Date().toLocaleString() 
     }; 
    } 

    componentDidMount(){ 
     setInterval(() => { 
      this.setState({ time : new Date().toLocaleString() }) 
     },1000) 
    } 

    render() { 
     return (
      <div>{this.state.time}</div> 
     ) 
    } 
    } 

Answer 2

、ここからのsetIntervalを削除：ShowTimeの成分で

ReactDOM.render(<Form/>,document.body); 
setInterval(ShowTime, 1000); 

を、状態変数の時間を宣言する。

this.state = { 
    time: new Date().toLocaleTimeString(), 
}, 

としてのsetIntervalを使用して、その状態を更新：

setInterval(() => { 
    this.setState({ time: new Date().toLocaleTimeString() }) 
}, 1000) 

次に、あなたは、レンダリングに{new Date().toLocaleTimeString()}の代わりに{this.state.time}を使用することができます。