Question

简而言之，我试图调用我的第三方要求我包含的外部JS功能，以便使用他们的API，但是没有按预期工作。

根据我所阅读的内容，我应该使用window.extFn()，在我的index.html中加入包含extFn()之类的外部JS后

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

...并且应该像在这里回答的那样使用它：FIDDLE无论上述函数是在文件中还是仅在index.html <script>部分定义。这对我为测试它而创建的JS文件起了作用。

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

...像往常一样使用script标记导入JS文件，并在我的React组件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文件

您可以查看external.js的请求在＆＃34;网络＆＃34; chrome dev-tool中的选项卡

ReactJS - 外部JS函数＆＃34;不是函数＆＃34;

2 个答案: