<!DOCTYPE html>
<html>
<head>
<title>Timer</title>
<style type="text/css">
#timer{
float:right;width:500px;
background:gold;
}
#message{
background:yellowgreen;
margin-right:500px;
}
</style>
<script src="/js/reactjs/build/react.js"></script>
<script src="/js/reactjs/build/JSXTransformer.js"></script>
</head>
<body>
<blockquote>
<div id="timer" ></div>
<div id="message"></div>
</blockquote>
<script type="text/jsx">
/** @
jsx React.DOM */
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
componentDidMount: function() {
console.log("started");
this.interval = setInterval(this.tick, 1000);
},
render: function() {
return (
<h1>Seconds Elapsed: {this.state.secondsElapsed}</h1>
);
}
});
React.renderComponent(
<Timer />,
document.getElementById('timer')
);
var Message = React.createClass({
render: function() {
return <h1>Hello, <br/> {
this.props.name}!</h1>;
}
});
React.renderComponent(
<Message name="xxxWorld" />,
document.getElementById('message')
);
</script>
</body>
</html>
比如两个组件，左面是信息 右面是定时器，如果要实现定时器超过１００以后，改变左面的信息，怎么样实现通知呢？
这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。
https://www.v2ex.com/t/163040
V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.