<!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>
比如两个组件，左面是信息 右面是定时器，如果要实现定时器超过１００以后，改变左面的信息，怎么样实现通知呢？
<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>
比如两个组件，左面是信息 右面是定时器，如果要实现定时器超过１００以后，改变左面的信息，怎么样实现通知呢？
Select Language