javascript - 无法更新 ReactJs 中的特定类

Question

我正在尝试动态更新使用 React.js 构建的页面中的日期时间值。因此，作为引用，我从以下文章开始:

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

但是日期时间值没有更新。这是我的代码:

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

我需要 ShowTime 作为一个单独的类。

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