React+TS函数组件中父组件如何调用子组件close方法

这个场景是React函数组件典型的ref暴露实例方法场景，不需要调整原有业务分层，按以下步骤实现即可：

1. 定义Modal对外暴露的方法类型 #

先声明Modal要暴露给父组件的方法类型，全程获得TS类型校验和提示：

// Modal组件对外暴露的实例结构类型
export type ModalInstance = {
  close: () => void
}

2. 改造Modal组件，通过forwardRef + useImperativeHandle暴露close方法 #

用forwardRef包裹Modal组件接收父组件传入的ref，再通过useImperativeHandle把内部的close方法透传出去，你原有close方法的逻辑完全不需要改动：

import { forwardRef, useImperativeHandle } from 'react';

// forwardRef泛型参数依次为：暴露的ref类型、组件自身的Props类型
const Modal = forwardRef<ModalInstance, { children: React.ReactNode }>((props, ref) => {
  // 原有close方法逻辑保持不变
  const close = () => {
    // 添加CSS类实现消失动画
    // 动画结束后setTimeout移除模态框节点
  }

  // 仅把close方法暴露给父组件，内部其他状态/方法不会泄露
  useImperativeHandle(ref, () => ({
    close
  }), [])

  return (
    <div className="modal-container">
      {/* 原有Modal渲染逻辑不变 */}
      {props.children}
    </div>
  )
})

3. 在Page组件中绑定ref，请求成功后触发关闭 #

在Page组件中用useRef创建对应类型的实例ref，绑定到Modal组件上，等API请求返回成功时直接调用暴露的close方法即可：

import { useRef } from 'react';

const Page = () => {
  // 创建Modal实例ref，初始值传null
  const modalRef = useRef<ModalInstance>(null);

  // 接收Form校验通过后传过来的表单数据
  const handleFormValidSubmit = async (formValues: unknown) => {
    // 原有API请求逻辑保持不变
    const response = await submitFormApi(formValues);
    if (response.success) {
      // 请求成功，调用Modal的close方法关弹窗
      modalRef.current?.close();
    }
  }

  return (
    <div className="page-content">
      {/* 给Modal绑定ref */}
      <Modal ref={modalRef}>
        <Form onValidSubmit={handleFormValidSubmit} />
      </Modal>
    </div>
  )
}

这种实现不会破坏现有的职责分层：Form只负责表单校验和值传递，Modal自己封装关闭动画、延时移除的内部逻辑，Page只处理核心业务请求，不需要关心弹窗关闭的实现细节，符合组件封装的要求。

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