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

Question

由于外部.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 }
}

Answer 1

您需要将您的代码段附加到一个生命周期方法(如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);
}, [])
}

Answer 2

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

1. 创建一个自定义脚本并异步添加js文件
2. 使用第三方节点模块

下面是脚本-

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

1. 基于功能的组件

   useEffect(((=>{addExternalJs((；}，[](；

2. 基于类的组件

   componentDidMount(({addExternalJs((；}