React组件之间的传值

最新推荐文章于 2024-10-06 01:40:02 发布

kongjunchao159

最新推荐文章于 2024-10-06 01:40:02 发布

阅读量5.1k

点赞数

分类专栏： React.js

本文链接：https://blog.csdn.net/kongjunchao159/article/details/72725736

版权

本文探讨了React组件间的通信方式，包括父组件向子组件通过props传值，子组件通过回调函数向父组件传值。重点讨论了无关系组件之间的交互，提出了两种解决方案：一是使用PubSubJS实现全局广播；二是利用dispatchEvent或fireEvent进行事件触发。

摘要由CSDN通过智能技术生成

父组件向子组件传值？传参，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(){
		//销毁监听的事件