React TypeScript 中如何调用另一个组件内的自定义函数

错误原因 #

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

1. getData是定义在APIComponent函数内部的局部变量，作用域仅在组件函数内部，外部默认无法访问
2. 你导入的APIComponent本身是React函数组件，不是包含getData属性的对象，直接调用APIComponent.getData自然会报属性不存在的错误
   另外你原代码里的回调写法也不符合语法规范，异步请求的返回结果应该通过.then或者async/await接收。

解决方案 #

方案1：抽离公共API方法（最推荐，适合请求逻辑和组件渲染无关的场景）

如果只是要复用请求逻辑，完全不需要把请求函数写在组件里，单独抽成公共模块导出即可：

// APIComponent.ts 文件代码
// 单独抽离导出请求方法
export const getData = (): Promise<any> => {
  return new Promise((resolve) => {
    // 此处写你的请求逻辑
    resolve('请求返回结果')
  })
}

// 如果还要保留APIComponent的渲染逻辑，可以同时导出组件
export const APIComponent = () => {
  // 组件自身的渲染逻辑
  return <div>API组件内容</div>
}

UI组件中直接导入调用即可：

import { getData } from "./APIComponent";

// 调用方式
getData().then((response: any) => {
  console.log(response);
})

方案2：用useImperativeHandle暴露组件内部方法（适合APIComponent是需要渲染的组件，必须调用其内部方法的场景）

如果APIComponent确实是一个需要渲染的UI组件，必须调用它内部的方法，就用React的forwardRef+useImperativeHandle组合暴露方法：

// APIComponent.ts 文件代码
import { forwardRef, useImperativeHandle } from 'react';

// 定义暴露给外部的方法类型
export type APIComponentRef = {
  getData: () => Promise<any>
}

const APIComponent = forwardRef<APIComponentRef>((props, ref) => {
  const getData = (): Promise<any> => {
    return new Promise((resolve) => {
      // 此处写你的请求逻辑
      resolve('请求返回结果')
    })
  }

  // 把需要暴露给外部的方法挂载到ref上
  useImperativeHandle(ref, () => ({
    getData
  }))

  // 组件自身的渲染逻辑
  return <div>API组件内容</div>
})

export default APIComponent;

UI组件中通过ref调用方法：

// UI组件代码
import { useRef } from 'react';
import APIComponent, { APIComponentRef } from "./APIComponent";

const UIComponent = () => {
  // 创建ref接收APIComponent暴露的方法
  const apiRef = useRef<APIComponentRef>(null);

  const handleCallGetData = () => {
    apiRef.current?.getData().then((response: any) => {
      console.log(response);
    })
  }

  return (
    <div>
      {/* 先渲染APIComponent，把ref传进去 */}
      <APIComponent ref={apiRef} />
      <button onClick={handleCallGetData}>调用getData</button>
    </div>
  )
}

export default UIComponent;

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