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

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

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

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

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

类组件中

---

1、React.createRef()

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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的方式不同。

1 2 3 4 5

... this.sub = ref}> ...

3、使用props自定义onRef属性

• 优点：假如子组件是嵌套了HOC，也可以指向真实子组件。
• 缺点：需要自定义props属性

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

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、需要自定义暴露的方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

import React, { useImperativeHandle } from 'react'; import { observer } from 'mobx-react' const Parent = () => {   let ChildRef = React.createRef();   function handleOnClick() {     ChildRef.current.func();   }   return (            click               ); }; 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抛出，因为组件的使用场景太复杂了。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

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的方式