React组件之间的传值
父组件向子组件传值？传参，props接收
子组件向父组件传值？回调函数
这里重点说一下无关系组件之间的交互
React中没有任何嵌套关系的组件之间如何传值？
方案一：全局广播的方式，即Publish/Subscribe，需要引入PubSubJS库
链接：https://github.com/mroderick/PubSubJS
例子：
//主容器
var Main = React.createClass({
render : function(){
return (
<div>
<Head />
<List name="name1" />
<List name="name2" />
</div>
)
}
})
var Head = React.createClass({
getInitialState : function(){
return {
name : "null"
}
},
componentDidMount : function(){
//监听订阅的事件
this.pubsub_token = PubSub.subscribe("name", function(topic, name){
this.setState({
name : name
})
}.bind(this))
},
componentWillUnmount : function(){
//销毁监听的事件
PubSub.unsubscribe(this.pubsub_token);
},
render : function(){
return (
<p>value : {this.state.name}</p>
)
}
})
var List = React.createClass({
//订阅事件
onClick : function(){
PubSub.publish("name", this.props.name);
}
render : function(){
return (
<div onClick={this.onClick}>{this.props.name}</div>
)
}
})注意：组件挂载完成，componentDidMount，再订阅事件，而当组件卸载的时候，需要取消订阅的事件，即componentWillUnmount
方案二：通过dispatchEvent事件触发器，注意IE使用fireEvent替代
//to subscribe
otherObject.addEventListener("click", function(){alert("xxx")});
//to dispatch
this.dispatchEvent("click");方案三：通过Signals，与dispatch类似，但是不能使用随机的字符串作为事件触发的引用
//to subscribe
otherObject.clicked.add(function(){alert("xxx")});
//to dispatch
this.clicked.dispatch();参考链接：
http://lib.csdn.net/article/react/10810
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇： 数组查找方法
- 下一篇： thinkphp添加数据add方法
