Javascript 在ReactJs web项目中包含外部.js文件

由于外部的.js文件url属于客户，所以我无法共享， 我需要包含外部js文件，并从该外部js文件调用函数。我看到了一些解决方案，如：

const script = document.createElement('script');
script.src = url;   //(This is external js url)
script.async = true;
document.body.appendChild(script);

但它对我不起作用，或者我不知道它是如何工作的

假设这是外部示例代码：

如果手动下载文件并导入，本地调用的示例代码

  let conn = demo("url", false)
  conn.login("username", "myPassword")

包含在reactjs中后如何执行上述调用

 export default function demo (end, sec) {  
    const login = (user, password) => {
            console.log(" sending login message")

    }
   
    const logout = async (user) => {
                    console.log(" sending logout message")
    }


    /*
     * Expose these methods to the client
     */
    return { login, logout }
}

---

您需要将代码段附加到一个生命周期方法中，如

componentDidMount

，这样React就可以在安装组件时安装（或加载）。完成后，可以调用自定义方法

如果使用类组件：

class MyComponent extends Component {

  componentDidMount() {
    const script = document.createElement('script');
    script.src = url;   //(This is external js url)
    script.async = true;
    document.body.appendChild(script);
  }

  render() { 
    return null;
  }
}

或者如果您使用带有挂钩的功能组件

const MyComponent = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;   //(This is external js url)
    script.async = true;
    document.body.appendChild(script);
  }, [])
}

---

要添加外部js，有两个选项

创建自定义脚本并异步添加js文件

使用第三方节点模块

下面是脚本-

const addExternalJs = () => {
   const script = document.createElement("script");
  script.src = "/<path1>/<path2>/yourJSFile.js";
  script.async = true;
  script.onload = () => this.scriptLoaded();

  document.body.appendChild(script);
}

constaddexternaljs=（）=>{
常量脚本=document.createElement（“脚本”）；
script.src=“///yourJSFile.js”；
script.async=true；
script.onload=（）=>this.scriptLoaded（）；
document.body.appendChild（脚本）；
}

基于功能的组件

useffect（（）=>{ addExternalJs（）； }, []);

基于类的组件

componentDidMount（）{ addExternalJs（）； }

---

谢谢，但我仍然不知道如何从外部js调用方法file@u_pendra加载javascript文件时，您将能够找到它们的所有函数。使用example更新问题加载外部脚本后，它将自动运行。如果您的方法在适当的上下文中公开，那么它应该可以工作。不幸的是，我相信您的方法是在React上下文中公开的，因此您必须将它们公开给window对象。在返回之前，您可以执行如下操作：

window.login=（…arg）=>login（…arg）