React中使用路由进行父子组件的通信

Posted 2020-12-11 windyz99

最近我在学习 React.js 框架，在此记录一下我使用 react-router-dom 来实现单页应用（SPA）的路由跳转时，怎么处理父子组件间的通信。本文使用的是 HashRouter。

父组件中的路由配置

/** 
 * 我使用了 react-router-dom 里面的 Switch 进行页面内的路由更新
 * NavPage 是父组件
 * Content 是子组件
 */

class NavPage extends React.Component {
	render () {
		return (
			<div className=‘body‘>
				<Switch>
	  				<Route path=‘/navpage/content‘ component={Content} />
				</Switch>
			</div>
		)
	}
}


/**
 * 在父组件中定义一个方法，实现父组件跳转到子组件并传参数过去
 * 注意： 第一次用 push 方法，后面用 replace 方法
 * func 里面放置的是让子组件调用的时候可以回调告诉父组件的方法
 */

navigateToSon () {
	this.props.history.replace({pathname: ‘/navpage/content‘, data: {这里以对象的方式放置要传递的参数}, func: this.sonCallMe})
}

sonCallMe (args) {
	console.log("My Son Call Me Now: ", args)	// 这里接收子组件传递过来的args，输出："My Son Call Me Now: 我是你儿子"
}

子组件中的配置

class Content extends React.Components {

  // 获取父组件 NavPage 初始化传过来的数据
  componentWillMount () {
    console.log(this.props.history.location.data)
  }
  componentWillReceiveProps () {
    console.log(this.props.history.location.data)
  }

  // 触发父组件传递过来的函数去与父组件通信
  callFather () {
      this.props.history.location.func("我是你儿子")
  } 

  render () {
		return (
			<div className=‘body‘>
				<div onClick={this.callFather.bind(this)}></div>
			</div>
		)
	}

}

我是刚踏进 React.js 大门的小白，一路上踩了很多坑。希望可以帮助到跟我一样的小白们，有 React 方面的问题可以留言或者私信我们一起交流~