React函数组件如何通过ref调用子组件方法，解决ref.current为null报错

云上老周

2026-9-28

问题原因

你遇到的报错核心有2个原因：

React的函数式组件默认没有实例，直接给函数组件绑定ref属性会无法生效，最终modalRef.current就是null
父组件中绑定按钮点击事件的写法错误，React的事件名需要用驼峰格式onClick而非原生HTML的小写onclick

要实现父组件调用子组件内部方法的需求，需要用forwardRef配合useImperativeHandle暴露子组件的指定方法给父组件的ref，修正后的代码如下：

修正后父组件代码

import { useRef } from 'react';
import Modal from './Modal';

const Parent = () => {
  // 函数组件内优先用useRef创建ref，会在多次渲染间保持引用不变
  const modalRef = useRef(null);
  const onBtnClick = () => {
    // 加可选链做兜底判断，避免组件未挂载时调用报错
    modalRef.current?.upadeState();
  }
  return(
    <div>
      <button onClick={onBtnClick}>bro</button>
      <Modal ref={modalRef} />
    </div>
  )
}

export default Parent;

修正后子组件代码

import { forwardRef, useImperativeHandle } from 'react';

// 用forwardRef包裹组件，接收父级传入的ref
const Modal = forwardRef((props, ref) => {
  const upadeState = () => {
    console.log('It works fam');
  }

  // 把需要对外暴露的方法/属性在这里返回
  useImperativeHandle(ref, () => ({
    upadeState
  }));

  return(
    <div>
      bro we here
    </div>
  )
})

export default Modal;