reactjs 两个component之间怎么通信?
发布于 10 年前 作者 yakczh 18100 次浏览 最后一次编辑是 8 年前 来自 问答

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

Parent Component 设置一个 state, 在 Chile Component 调用 props 传入的方法修改

mixins 好像是

@jiyinyiyong

父子关系的fb页面上有例子,如果是完全相互独立的两个组件呢?就象上面的页面这种

我觉得没有好的办法, 自己目前的项目里想一个会有问题的办法先用上去, … 然后写个注释说这个代码有问题

react是单向数据流的。但是为了特殊需要,提供了mixin去做双向通信,这违反了react的本质,一般不推荐用,官网也对此做出了警告。

两个毫无关系的组件A B,通信是可以的。 A点一个button去设置B里的datastoreB,B里getInitial或者renderDidMount里监听它的datastroeB,如果datastroeB有变化,就产生响应的行为。 我目前用的是microEvent.js去设置datastoreB的对象上的监听。不知道能不用用flux或者scaleApp去做,等有空试试

回到顶部