ReactJS-外部JS函数“不是函数”

Question

简而言之，我试图调用一个外部JS函数，我的第三方要求我包括该外部JS函数，以便使用其API，但无法正常运行。

从我的阅读中，我应该在index.html中包含外部JS之后使用例如window.extFn() ，其中包含extFn()就像这样

<script src="https://example.com/external.js"></script> <-实际上不是这样，请参阅更新2，因为我是在本地导入库的

...并且应该像在这里回答那样使用它： 从react组件调用外部Javascript函数 ，无论该函数是在文件内部还是在index.html <script>部分上简单定义。 这已经在我创建的用于测试此文件的JS文件上起作用。

//File: test.js
function test() {
    return "Hello";
}

...像往常一样使用script标签导入了JS文件，并在我的React Component的render()使用console.log(window.test()) render()返回Hello 。

我尝试将导入从主体移到HTML头，反之亦然，但我仍然遇到的错误是：

TypeError: window.extFn is not a function
QuickCheckout.render
....
  22 |    }
  23 | 
  24 |    render() {
> 25 |        window.extFn({
  26 |            
View compiled
▶ 20 stack frames were collapsed.

当我查看浏览器控制台时，出于某种原因（似乎是关键问题）

Uncaught SyntaxError: Unexpected token < external.js:1

尝试console.log(window.extFn)并返回undefined

因此，我认为所说的JS可能是问题本身，但我对此不知所措。 同时，我已经给第三方支持小组发送了电子邮件，有人对此有任何建议吗？ 非常感谢你。

更新：现在我上面的test.js文件在我的实验中已经起作用，在我的控制台中也产生了Unexpected token <错误...

更新2：对于您的问题，我深表歉意。 但是我实际上是从本地来源导入JS的，因为必须移植他们的库，因为他们使用的是jQuery 2而不是3。

<script src="assets/js/external.js"></script>

令我哑巴的是，我忘记了尾随/ 。 谢谢您的帮助。

Answer 1

在文件开头，在类定义之前，请添加

let extFn = window.extFn

然后在组件内部，就可以使用它。

extFn()//call inside component

Answer 2

似乎external.js的路径错误，它返回的是html文件而不是js文件

您可以在chrome dev-tool的“网络”标签中检查external.js的请求返回的内容