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

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

父组件中的路由配置

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

class NavPage extends React.Component {
	render () {
		return (
			
) } } /** * 在父组件中定义一个方法,实现父组件跳转到子组件并传参数过去 * 注意: 第一次用 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 (
			
) } }

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

你可能感兴趣的:(前端,JS)