如何在React组件中调用网页中嵌套于自执行函数的Vanilla JS函数？

嗨，我来帮你分析下问题所在，以及怎么解决～

首先，你现在遇到的问题，核心原因其实是你没必要在React组件里重新复制一份getInfo的代码呀！原网页里已经定义了这个全局可用的自执行函数返回对象，直接复用它就好，复制反而容易因为环境差异或者代码拼写问题出bug，而且还会造成逻辑重复。

解决方案一：直接调用全局的getInfo #

因为你的React组件是嵌入在普通网页里的，原网页的getInfo如果是在全局作用域下定义的（从你给出的代码看，它是全局的const变量，在浏览器环境里会挂载到window对象上），那你可以在React组件里直接通过window.getInfo来访问它：

const calculate = () => {
  // 先做个类型检查，避免网页里的getInfo没加载好或者不存在时报错
  if (window.getInfo && typeof window.getInfo.updateInfo === 'function') {
    window.getInfo.updateInfo("1324");
  }
  // 你的其他React辅助函数逻辑
};

这样做的好处是，你复用了网页里已经存在的逻辑，保证和网页上调用的是同一个函数，不会出现两边逻辑不一致的情况，也避免了复制代码带来的潜在错误。

为什么你复制代码会报错？ #

如果一定要自己复制这段逻辑，那你得检查下这几个点：

• 拼写错误：比如返回对象里的键名是不是和函数名一致？比如有没有把updateInfo写成小写的updateinfo？
• 环境依赖：原函数里的//Do something部分，是不是依赖了网页里的全局变量或者DOM元素？如果是的话，在React组件的模块环境里可能访问不到这些，导致函数定义异常，甚至整个自执行函数返回的对象不完整。
• 模块作用域：如果你的React组件是用模块化方式编写的（比如用Create React App），那你复制的const getInfo是模块内的局部变量，要确保你调用它的地方和它在同一个模块里，或者正确导出导入。

比如如果要在组件内复用这段逻辑，确保代码完全正确：

// 在React组件文件内或者单独的辅助文件里
const getInfo = (() => {
  const updateInfo = (dataId) => {
    // 这里的逻辑要确保在React环境里能正常运行，不依赖网页全局的非公开变量
    console.log('更新信息，ID：', dataId);
  };
  const showInfo = (dataId) => {
    console.log('展示信息，ID：', dataId);
  };
  // 务必确保返回的对象包含正确的函数引用
  return { updateInfo, showInfo };
})();

// 然后在组件里调用
const calculate = () => {
  getInfo.updateInfo("1324");
  // 其他逻辑
};

总结 #

优先推荐第一种方案，直接调用网页全局的getInfo，既简单又能保证逻辑一致性。如果确实需要在React里单独复用这段逻辑，一定要仔细检查代码的拼写、环境依赖和作用域问题哦～

备注：内容来源于stack exchange，提问作者MeltingDog