ReactJs 组件间通信

最新推荐文章于 2022-03-05 00:42:09 发布

starwmx520

最新推荐文章于 2022-03-05 00:42:09 发布

阅读量747

点赞数

分类专栏： ReactJs 文章标签： reactjs 组件通信

本文链接：https://blog.csdn.net/starwmx520/article/details/49077793

版权

ReactJs 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">组件在开发时经常会相互通信，传递值调用方法等</span>

父级和子级在调用子级组件时绑定就可以了。

还可以绑定父级方法，在子级内调用传递参数。

但有时需要同级组件单通信：

这时就需要借用一些通信库了，如PubSub.js

var a=PubSub.subscribe('product',function(type,value){
	type 是设置的类型这里是product  value是传递的值<span style="font-family: Arial, Helvetica, sans-serif;">        </span>

这是创建一个订阅

PubSub.unsubscribe(a);

删除订阅

PubSub.publish('product', XXX);

调用订阅类型是product

</pre><pre name="code" class="javascript">这样在组件的DidMount方法内创建订阅赋值给this。

可以给函数绑定当前this  .bind(this)  内部就可用this.XX来引用当前组件并执行操作如setState等

在销毁组件方法内删除订阅

在其他组件内就可以使用订阅了。

以下是我的实例：

</pre><pre name="code" class="javascript">

var Pro=React.createClass({
				render:function(){
					return (
					<div>
						<Pros></Pros>
						<Product name="pro1"></Product>
						<Product name="pro2"></Product>
						<Product name="pro3"></Product>
					</div>
					)
				}
			});
			var Pros=React.createClass({
				getInitialState:function(){
					return {
						selection:''
					}
				},
				componentDidMount:function(){
					this.pubsub=PubSub.subscribe('product',function(topictype,value){
						console.log(topictype);
						this.setState({
							selection:value
						});
					}.bind(this))
				},
				componentWillUnmount:function(){
					PubSub.unsubscribe(this.pubsub);
				},
				render:function(){
					return (
					  <p>selection:{this.state.selection}</p>
					)
				}
			});
			var Product=React.createClass({
				onclick:function(){
					 PubSub.publish('product', this.props.name);
				},
				render:function(){
					return (
					  <div onClick={this.onclick}>{this.props.name}</div>
					)
				}
			})
			
			React.render(<Pro></Pro>,document.querySelector('#div2'));