2013-05-30 03:46:11 +08:00
|
|
|
/**
|
|
|
|
|
* @jsx React.DOM
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
var TIMER_COMPONENT = "\
|
|
|
|
|
var Timer = React.createClass({\n\
|
|
|
|
|
getInitialState: function() {\n\
|
|
|
|
|
return {secondsElapsed: 0};\n\
|
|
|
|
|
},\n\
|
2013-07-17 14:44:09 +08:00
|
|
|
tick: function() {\n\
|
2013-05-30 03:46:11 +08:00
|
|
|
this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\
|
2013-07-17 14:44:09 +08:00
|
|
|
},\n\
|
2013-05-30 03:46:11 +08:00
|
|
|
componentDidMount: function() {\n\
|
2013-07-18 04:08:38 +08:00
|
|
|
this.interval = setInterval(this.tick, 1000);\n\
|
|
|
|
|
},\n\
|
|
|
|
|
componentWillUnmount: function() {\n\
|
|
|
|
|
clearInterval(this.interval);\n\
|
2013-05-30 03:46:11 +08:00
|
|
|
},\n\
|
|
|
|
|
render: function() {\n\
|
2013-05-30 16:16:15 +08:00
|
|
|
return React.DOM.div({},\n\
|
2013-12-02 20:04:45 +08:00
|
|
|
'Seconds Elapsed: ', this.state.secondsElapsed\n\
|
2013-05-30 03:46:11 +08:00
|
|
|
);\n\
|
|
|
|
|
}\n\
|
|
|
|
|
});\n\
|
|
|
|
|
\n\
|
2013-05-30 16:16:15 +08:00
|
|
|
React.renderComponent(Timer({}), mountNode);\
|
2013-05-30 03:46:11 +08:00
|
|
|
";
|
|
|
|
|
|
|
|
|
|
React.renderComponent(
|
|
|
|
|
<ReactPlayground codeText={TIMER_COMPONENT} />,
|
|
|
|
|
document.getElementById('timerExample')
|
|
|
|
|
);
|