reactjs 两个component之间怎么通信?
<!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 type="text/javascript" src="//cdnjscn.b0.upaiyun.com/libs/react/0.11.1/react.js"></script>
<script type="text/javascript" src="//cdnjscn.b0.upaiyun.com/libs/react/0.11.1/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.render(
<Timer />,
document.getElementById('timer')
);
var Message = React.createClass({
render: function() {
return <h1>Hello, <br/> {this.props.name}!</h1>;
}
});
React.render(
<Message name="xxxWorld" />,
document.getElementById('message')
);
</script>
</body>
</html>
比如这个页面,左面是信息 右面是定时器,如果要实现定时器超过100以后,改变左面的信息,怎么样实现通知呢?
6 回复
把回调函数传入ReactJS component
mixins 好像是
父子关系的fb页面上有例子,如果是完全相互独立的两个组件呢?就象上面的页面这种
react是单向数据流的。但是为了特殊需要,提供了mixin去做双向通信,这违反了react的本质,一般不推荐用,官网也对此做出了警告。
两个毫无关系的组件A B,通信是可以的。 A点一个button去设置B里的datastoreB,B里getInitial或者renderDidMount里监听它的datastroeB,如果datastroeB有变化,就产生响应的行为。 我目前用的是microEvent.js去设置datastoreB的对象上的监听。不知道能不用用flux或者scaleApp去做,等有空试试