React父组件怎么调用子组件的方法

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

React父组件怎么调用子组件的方法

【程序员必备开发工具推荐】Apifox一款免费API管理工具Apifox = Postman + Swagger + Mock + JMeter

本教程操作环境：Windows7系统、react18版、Dell G3电脑。

在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 (

this.sub}>

);

}

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 (

this.handleOnClick}>click

this.Sub = node }>

)

}

函数组件、Hook组件

1、useImperativeHandle

优点： 1、写法简单易懂 2、假如子组件嵌套了HOC，也可以指向真实子组件
缺点： 1、需要自定义props属性 2、需要自定义暴露的方法

import React, { useImperativeHandle } from 'react';

import { observer } from 'mobx-react'

const Parent = () => {

let ChildRef = React.createRef();

function handleOnClick() {

ChildRef.current.func();

}

return (

);

};

const Child = observer(props => {

//用useImperativeHandle暴露一些外部ref能访问的属性

useImperativeHandle(props.onRef, () => {

// 需要将暴露的接口返回出去

return {

func: func,

};

});

function func() {

console.log('执行我');

}

return

子组件

;

});

export default Parent;

2、forwardRef

使用forwardRef抛出子组件的ref

这个方法其实更适合自定义HOC。但问题是，withRouter、connect、Form.create等方法并不能抛出ref，假如Child本身就需要嵌套这些方法，那基本就不能混着用了。forwardRef本身也是用来抛出子元素，如input等原生元素的ref的，并不适合做组件ref抛出，因为组件的使用场景太复杂了。

import React, { useRef, useImperativeHandle } from 'react';

import ReactDOM from 'react-dom';

import { observer } from 'mobx-react'

const FancyInput = React.forwardRef((props, ref) => {

const inputRef = useRef();

useImperativeHandle(ref, () => ({

focus: () => {

inputRef.current.focus();

}

}));

return "text" />

 });
 
 const Sub = observer(FancyInput)
 
 const App = props => {
   const fancyInputRef = useRef();
 
   return (
     
       
       
         onClick={() => fancyInputRef.current.focus()}
       >父组件调用子组件的 focus
     
   )
 }
 
 export default App;

总结

父组件调子组件函数有两种情况

子组件无HOC嵌套：推荐使用ref直接调用
有HOC嵌套：推荐使用自定义props的方式

相关阅读:
leetcode记录(一)
java 比较运算符
 【计算机视觉 | 图像分割】arxiv 计算机视觉关于图像分割的学术速递（8 月 30 日论文合集）
解决提示CUDA内存不够，但 GPU显示还有足够的空间
 别再苦恼电脑录屏软件哪个免费了，试试这几款吧
 FPGA高端项目：图像缩放+GTX+UDP架构，高速接口以太网视频传输，提供2套工程源码加QT上位机源码和技术支持
 LeetCode 第299次周赛第4题从树中删除边的最小分数
 这家身在非洲的中国电商企业，有着怎样的云技术加持？
全新服务器安装centos7系统及使用
 和数区块链技术可以解决安全信任问题
原文地址：https://blog.csdn.net/visionke/article/details/134429305