reactjs 里面，组件相互之间怎么通信呢？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 3394 天前的主题，其中的信息可能已经有所发展或是发生改变。

<!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>

比如两个组件，左面是信息　右面是定时器，如果要实现定时器超过１００以后，改变左面的信息，怎么样实现通知呢？

timer

script

function

3 条回复 • 2015-01-17 19:57:07 +08:00

bcxx

2015-01-17 19:13:28 +08:00

加一个 model，让两个 view 都和这个 model 的值（即计时器的时间）进行绑定。

yakczh

2015-01-17 19:38:46 +08:00

@bcxx 绑定是用　this.refs　吗？

damngood

2015-01-17 19:57:07 +08:00

记得 React 官网有建议. 甚至官方给出了个 Dispacher 组件实现的.