React项目中如何调用外部JS文件中的Salute函数？

出现“Salute is not defined”错误的核心原因有两个：

1. 脚本加载时机不匹配：react-helmet插入的外部脚本是异步加载的，而MyScript()在组件渲染时立即执行，此时外部脚本还未加载完成，自然找不到对应的函数。
2. 全局作用域暴露问题：如果外部脚本中的函数没有挂载到全局对象（比如window），即使加载完成，也无法在模块文件（MyScript）中直接访问。

以下是可行的解决方案：

方案一：监听外部脚本加载完成后执行代码 #

通过手动创建脚本并监听onload事件，确保外部函数可用后再调用MyScript：

修改index.js：

import React, { useEffect, useState } from "react";
import MyScript from "../javascript/myscript";

function Index(){
  const [scriptReady, setScriptReady] = useState(false);

  useEffect(() => {
    // 创建并加载外部脚本
    const externalScript = document.createElement('script');
    externalScript.src = "https://example.com/functions.js";
    externalScript.type = "text/javascript";
    // 脚本加载完成后标记状态
    externalScript.onload = () => setScriptReady(true);
    // 移除组件卸载时的脚本
    const cleanup = () => document.head.removeChild(externalScript);
    
    document.head.appendChild(externalScript);
    return cleanup;
  }, []);

  return(
    <div id="index">
      <h1>Hello, test</h1>
      {/* 脚本加载完成后再执行MyScript */}
      {scriptReady && MyScript()}
    </div>
  );
}

export default Index;

如果坚持使用react-helmet，可以利用其支持的onLoad属性：

import React, { useEffect, useState } from "react";
import Helmet from "react-helmet";
import MyScript from "../javascript/myscript";

function Index(){
  const [scriptReady, setScriptReady] = useState(false);

  return(
    <div id="index">
      <Helmet> 
        <script 
          type="text/javascript" 
          src="https://example.com/functions.js"
          onLoad={() => setScriptReady(true)}
        />
      </Helmet>
      <h1>Hello, test</h1>
      {scriptReady && MyScript()}
    </div>
  );
}

export default Index;

方案二：将外部函数挂载到全局对象（需修改外部脚本） #

如果你有权限修改functions.js，可以将函数挂载到window对象，确保全局可访问：

修改functions.js：

window.Salute = function(){
  return console.log("Hello, world!");
}

window.SayGoodBye = function(){
  return console.log("Good bye, world!")
}

然后修改MyScript.js，通过window调用函数：

window.Salute();

这种方式仍需注意加载时机，建议配合方案一的状态判断一起使用，避免脚本未加载完成时调用。

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