React父组件如何调用子组件

本篇内容介绍了“React父组件如何调用子组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

我们提供的服务有：成都网站建设、网站建设、微信公众号开发、网站优化、网站认证、梁山ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的梁山网站制作公司

调用方法：1、类组件中的调用可以利用React.createRef()、ref的函数式声明或props自定义onRef属性来实现；2、函数组件、Hook组件中的调用可以利用useImperativeHandle或forwardRef抛出子组件ref来实现。

在React中，我们经常在子组件中调用父组件的方法，一般用props回调即可。但是有时候也需要在父组件中调用子组件的方法，通过这种方法实现高内聚。有多种方法，请按需服用。

类组件中

1、React.createRef()

• 优点：通俗易懂，用ref指向。

• 缺点：使用了HOC的子组件不可用，无法指向真是子组件

  比如一些常用的写法，mobx的@observer包裹的子组件就不适用此方法。

import React, { Component } from 'react';

class Sub extends Component {
  callback() {
    console.log('执行回调');
  }
  render() {
    return 
子组件
;
  }
}

class Super extends Component {
  constructor(props) {
    super(props);
    this.sub = React.createRef();
  }
  handleOnClick() {
    this.sub.callback();
  }
  render() {
    return (
      

        
      
    );
  }
}

2、ref的函数式声明

• 优点：ref写法简洁

• 缺点：使用了HOC的子组件不可用，无法指向真是子组件（同上）

使用方法和上述的一样，就是定义ref的方式不同。

...

 this.sub = ref}>

...

3、使用props自定义onRef属性

• 优点：假如子组件是嵌套了HOC，也可以指向真实子组件。

• 缺点：需要自定义props属性

import React, { Component } from 'react';
import { observer } from 'mobx-react'

@observer
class Sub extends Component {
	componentDidMount(){
    // 将子组件指向父组件的变量
		this.props.onRef && this.props.onRef(this);
	}
	callback(){
		console.log("执行我")
	}
	render(){
		return (
子组件
);
	}
}

class Super extends Component {
	handleOnClick(){
       // 可以调用子组件方法
		this.Sub.callback();
	}
	render(){
		return (
          

			click
			 this.Sub = node }>