React+TypeScript项目中如何从index.html调用React方法？

方法一：将React方法挂载到全局window对象 #

这是最直接的实现方式，通过把组件内的方法绑定到window全局对象，让外部脚本可以直接调用。

组件内代码实现 #

import { useEffect, useCallback } from 'react';

const MyApp = () => {
  // 定义要暴露给外部的业务方法
  const handleFilename = useCallback((filename: string) => {
    console.log('外部传入的文件名:', filename);
    // 在这里编写你的业务逻辑，比如更新组件状态、触发数据请求等
  }, []);

  useEffect(() => {
    // 将方法挂载到window对象，TypeScript需做类型断言
    (window as any).CallReactMethod = handleFilename;

    // 组件卸载时清理全局方法，避免内存泄漏
    return () => {
      delete (window as any).CallReactMethod;
    };
  }, [handleFilename]);

  return <div>React应用内容</div>;
};

export default MyApp;

优化TypeScript类型（可选） #

为了避免any类型的使用，可以在项目中添加全局类型声明文件：
在src目录下创建global.d.ts：

declare global {
  interface Window {
    CallReactMethod?: (filename: string) => void;
  }
}

export {};

index.html中的外部函数修改 #

<script>
function func1(filename){
  // 先判断方法是否存在，避免报错
  if (window.CallReactMethod) {
    window.CallReactMethod(filename);
  } else {
    console.error('React方法尚未加载完成');
  }
}
</script>

方法二：使用自定义事件（推荐） #

这种方式采用事件驱动模式，不会污染全局对象，更符合现代前端的设计理念。

组件内代码实现 #

import { useEffect } from 'react';

const MyApp = () => {
  useEffect(() => {
    // 定义自定义事件的处理函数
    const handleFileReceived = (event: CustomEvent<string>) => {
      const filename = event.detail;
      console.log('通过自定义事件接收的文件名:', filename);
      // 编写业务逻辑
    };

    // 监听自定义事件
    window.addEventListener('fileReceived', handleFileReceived as EventListener);

    // 组件卸载时移除事件监听
    return () => {
      window.removeEventListener('fileReceived', handleFileReceived as EventListener);
    };
  }, []);

  return <div>React应用内容</div>;
};

export default MyApp;

index.html中的外部函数修改 #

<script>
function func1(filename){
  // 派发自定义事件，携带文件名数据
  window.dispatchEvent(new CustomEvent('fileReceived', { detail: filename }));
}
</script>

两种方案对比 #

• 挂载window：实现简单，适合小型项目或简单场景，但会污染全局命名空间，存在变量冲突风险。
• 自定义事件：更优雅，无全局污染，适合复杂应用场景，扩展性更强。

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