react中（父子/祖先/路由）数据和事件的通信方法总结

最新推荐文章于 2025-07-03 11:43:17 发布

lemon678

最新推荐文章于 2025-07-03 11:43:17 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： react父子通信

本文链接：https://blog.youkuaiyun.com/lemon_zhao/article/details/80401001

本文总结了在React开发中，如何进行父子、祖先组件以及路由之间的数据和事件通信。包括通过props传递数据和方法，使用refs访问子组件状态和方法，处理路由变化时的数据同步，以及跨层级的祖先组件通信。详细介绍了各种通信方式的实践和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好久没更博了啊，0.0，最近手头的一个前端控制台项目，我是用阿里开源的ant框架搭建的，用着还是蛮顺手了，在使用过程中，碰到一些数据通信的问题，有些和vue相同，有些不一样的地方还是踩了些坑的，特地整理了下。

1.子组件调用父级的数据和方法

父级组件代码如下，把数据和方法通过props向下传递，在子组件中调用this.props.text即可获得父级数据，调用this.props.checkboxCallback()即可调用父级方法

render() {
	const text = this.state.text;
	const checked = this.state.checked;
	return (
		<Row>
			<Col span={24}>
				<ChildComponent 
					ref="child1"
					text={text} 
					checked={checked} 
					inputCallback={this.inputCallback} 
					checkboxCallback={this.checkboxCallback}
				>
				</ChildComponent>
				<button onClick={() => this.log('lemon')}>console</button>
				<button onClick={() => this.changeParentPars()}>改变父层级的值</button>
			</Col>
		</Row>
	)
}

用props这种方法调用的时候，如果传递的props是同一个引用对象，那么只改变父级的state，传递给子集的props也会随之改变，但如果是独立引用对象，就需要在子集用componentWillReceiveProps监听属性值的变化，并随之setState。