將外部純 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 。