React中Class类父组件如何调用Function函数子组件的内部方法

核心原理 #

• Class组件无法使用Hook（包括useRef），需使用原生的React.createRef()创建实例引用
• 函数组件默认不会暴露内部实例，需要用forwardRef转发ref，再通过useImperativeHandle自定义暴露给父组件的方法

完整实现代码 #

1. 子组件改造 #

import { forwardRef, useImperativeHandle } from 'react';

// 用forwardRef包裹子组件，接收父组件传递的ref
const Child = forwardRef((props, ref) => {
  const handleParent = () => { 
    console.log("handling parent call")
  }

  // 自定义要暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    handleParent // 把需要调用的方法在这里导出
  }))

  return(
    // 子组件原有内容
    <div>child content</div>
  )
})

export default Child;

2. 父组件改造 #

import React, { Component } from 'react';
import Child from './Child';

export default class Parent extends Component{
  constructor(props){
    super(props)
    this.state={
      consoletext:"",
    }
    // Class组件用createRef创建ref
    this.childRef = React.createRef();
  }

 componentDidMount() {
  // 父组件直接调用子组件暴露的方法，加可选链避免未挂载时报错
  this.childRef.current?.handleParent();
 }

render(){
   return(
    <div>
      {/* 把创建的ref传递给子组件 */}
      <Child ref={this.childRef} />
    </div>
)
}
}

注意事项 #

• 不要过度依赖父组件调用子组件方法的模式，优先尝试通过props传参驱动子组件逻辑，反向调用属于特殊场景的逃逸方案
• 调用子组件方法时建议加可选链?.，避免ref未挂载完成时报错

内容的提问来源于stack exchange，提问作者sooon