将外部纯 javascript 文件链接到我的 React 组件

Question

我正在尝试构建一个生日快乐 animation 的反应组件，该组件写在外部 javascript 文件中。 我知道我们可以通过以下方式链接外部 javascript 文件：

  componentDidMount() {
    const script = document.createElement("script");
    script.async = true;
    script.src = "./hbd.js";
    script.type = "text/javascript";
    this.div.appendChild(script);
  }

在hbd.js javascript 文件中，我有一个 function anim() ，我可以调用它来显示 animation。

但是，如果我不将脚本的类型更改为script.type = "text/bable "或script.type = "text/jsx "它会给我一个Uncaught SyntaxError: Unexpected token '<'错误。 如果我确实更改了类型，则不会给出错误，但文件根本不会加载，并且没有看到 animation 效果。

有人知道 React 是否有可能做到这一点？

Answer 1

确保您可以GET JavaScript 文件hbd.js 。 将浏览器指向完整的 url 并确保 hbd.js 文件由 web 服务器返回。 如果您在本地拥有 web 服务器，则类似于http://localhost/hbd.js 。