时间戳

首页 > 解决方案 > ReactJS - 外部 JS 函数“不是函数”

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

问题描述

原始链接

我正在尝试调用我的第 3 方要求我包含的外部 JS 函数，以便使用他们的 API，但不能按预期工作。

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

...并且应该像这里回答的那样使用它：从反应组件调用外部 Javascript 函数，无论所述函数是在文件中还是在 index.html 部分中简单定义。这适用于我为测试而创建的 JS 文件。

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

...像往常一样使用脚本标签导入 JS 文件，并在我的 React 组件的 render() 中使用 console.log(window.test()) 返回 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

我上面的 test.js 文件在我的实验中有效，Unexpected token < error在我的控制台中也产生了...

从本地源导入 JS：

<script type="text/javascript"language="javascript"src="../src/external.js"></script>

这是 external.js 的示例

function Initialize() {
    try {

        if (abc !== null) {

        }

        /*  if
         provide the call backs */
        abcd = new DEGD(
            a,
            b,
            c,
            d
        displayProgress('Initializing web socket...');
    } catch (e) {

        alert("Initialization Failed" + e);
    }
}

标签： javascriptreactjs

解决方案

可以在chrome devtools中查看源码，查看external.js文件是否导入成功

推荐阅读