Question

我有以下HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>The game</title>
    </head>
    <body>
        <div id="target"></div>
        <script src="//fb.me/react-0.12.1.js"></script>
        <script src="//fb.me/JSXTransformer-0.12.1.js"></script>
        <script type="text/jsx">
            React.render(
              <h1>Hello, world! {new Date().toISOString()}</h1>,
              document.getElementById('target')
              );
        </script>
    </body>
</html>

这是在浏览器中呈现“Hello，world！2014-12-16T18：45：22.022Z”之类的字符串，但除非我重新加载页面，否则它不会更新。

如何动态加载XYZ，在这种情况下，日期字符串将保持最新（没有双关语）？

谢谢，

Answer 1

得到反馈：

我的代码只呈现一次因为React.render（）只被调用一次。我想要的行为可以通过将React.render（）调用放在一个区间内来获得。

Answer 2

渲染应该是纯粹的（如果输入相同则返回相同的结果），所以反应方式是这样做：

var Hello = React.createClass({
    componentDidMount: function() {
        this.interval = setInterval(this.update, 16),
    },
    componentWillUnmount: function() {
        clearInterval(this.interval);
    },
    update: function() {
        this.setState({date: new Date()});
    },
    getInitialState: function() {
        return {date: new Date()};
    },
    render: function() {
        // This is pure because it always render the same result if this.date doesn't change
        return <h1>Hello, world! {this.state.date.toISOString()}</h1>
    }
});

   React.render(
      <Hello />,
      document.getElementById('target')
      );

如何在ReactJS中重新渲染？

2 个答案: