React组件中调用外部JS模块函数失败的问题咨询

架构老林

2026-8-19

问题原因与解决方法

为什么会报错？

ES模块（type="module"）有独立的作用域，模块里导出的变量/方法不会自动挂载到window全局对象上，这和普通脚本（非module类型）的行为完全不同。你在index.html里的脚本是直接在模块内部导入并调用方法，所以能正常运行，但通过动态创建script标签加载模块后，没法从window上拿到导出的方法。

解决方案

方案1：修改模块源码（如果有权限的话）

直接在viewInfoHelper.js末尾加一行代码，把需要的方法挂载到window上：

// viewInfoHelper.js 末尾新增
window.viewAllItemsInfo = viewAllItemsInfo;

这样模块加载后，window.viewAllItemsInfo就会存在，你的原useScript钩子就能正常调用了。

方案2：用React支持的动态import（无需修改模块源码）

放弃创建script标签的方式，直接在useEffect里用ES动态import语法加载模块，这样能直接获取导出的方法，更符合React的开发模式：

export const useScript = (url: string) => {
  useEffect(() => {
    let isMounted = true;

    const loadModule = async () => {
      try {
        const module = await import(url);
        if (isMounted) {
          module.viewAllItemsInfo("en");
        }
      } catch (err) {
        console.error("加载模块失败:", err);
      }
    };

    loadModule();

    return () => {
      isMounted = false;
    };
  }, [url]);
};