React组件之间的传值

来源：互联网发布：iphone7垃圾清理软件编辑：程序博客网时间：2024/06/06 03:10

父组件向子组件传值？传参，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 subscribeotherObject.addEventListener('click', function(){alert('xxx')});//to dispatchthis.dispatchEvent('click');

方案三：通过Signals，与dispatch类似，但是不能使用随机的字符串作为事件触发的引用

//to subscribeotherObject.clicked.add(function(){alert('xxx')});//to dispatchthis.clicked.dispatch();

参考链接：

http://lib.csdn.net/article/react/10810

阅读全文

0 0