如何使用我添加的外部腳本來反應 JS？

Question

我想在我的反應組件中添加一個

<script>http://xxx.xxx/XX.js</script>

我知道我可以簡單地使用 JSX 添加它，但我不知道如何使用它，

例如，此腳本有一個名為 A.Sort() 的 function，我如何調用它並從組件中使用它？

Answer 1

您可以異步加載腳本並在加載時訪問它。

componentDidMount() {
  const script = document.createElement("script");
  script.src = "/static/libs/your_script.js";
  script.async = true;
  script.onload = () => this.scriptLoaded();

  document.body.appendChild(script);
}

它應該連接到window 。

 scriptLoaded() {
   window.A.sort();
 }

或者

scriptLoaded() {
  A.sort();
}

Answer 2

您可以在 /public/index.html 中包含該標簽，然后像在普通 JS 代碼中一樣使用該腳本，如果您想使用 jQuery，請參考以下示例：

在您的 public/index.html 中包含以下內容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

然后在任何地方您都可以像往常一樣使用 jQuery 功能：

window.$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

Answer 3

有時我們需要使用外部js庫，這種情況下我們需要在組件中插入script標簽，但是在react中我們使用的是jsx，所以我們不能像在HTML中添加那樣直接添加script標簽。

在這個例子中，我們將看到如何將外部腳本文件加載到頭部、主體元素或組件中。

componentDidMount() {
    const script = document.createElement("script");
    script.async = true;
    script.src = "https://some-scripturl.js";
    script.onload = () => this.scriptLoaded();



    //For head
    document.head.appendChild(script);

    // For body
    document.body.appendChild(script);

    // For component
    this.div.appendChild(script);

  }

Answer 4

您可以通過添加所需的腳本來修改您的 index.html 文件（如果您正在使用）。

或者，如果你不能編輯它或者你沒有使用它，有一堆附加組件可以解決這個問題，例如react-load-script

Answer 5

你可以使用 React Helmet npm

第 1 步： npm i react-helmet

第2步 ：

<Helmet>
    <script src="/path/to/resource.js" type="text/javascript" />
</Helmet>

Answer 6

將此腳本添加到 index.html 后

<script>http://xxx.xxx/XX.js</script>

如果您在 App.js（或任何您想要的地方）中使用 console.log(window)，您可能會檢查可用的功能。 一旦你檢查了確切的功能，那么你就可以像這樣使用它

window.A.sort();

我認為這可能是最簡單的方法。 請記住，您必須編寫“窗口”。 在函數的左側。

Answer 7

一個鈎子版本。

import * as React from "react";

function loadError(onError) {
  console.error(`Failed ${onError.target.src} didn't load correctly`);
}

function External() {
  React.useEffect(() => {
    const LoadExternalScript = () => {
      const externalScript = document.createElement("script");
      externalScript.onerror = loadError;
      externalScript.id = "external";
      externalScript.async = true;
      externalScript.type = "text/javascript";
      externalScript.setAttribute("crossorigin", "anonymous");
      document.body.appendChild(externalScript);
      externalScript.src = `https://externalurl.example.com/external.js?key=9393ABCDEFGH`;
    };
    LoadExternalScript();
  }, []);

  return <></>;
}

export default External;

Answer 8

如果你想在多個組件中導入腳本，那么你可以創建自己的自定義掛鈎，允許你在所需組件中插入腳本：

import { useEffect } from 'react'
const importScript = src => {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = src
    script.async = true
    document.body.appendChild(script)
    return () => {
      document.body.removeChild(script)
    }
  }, [src])
}
export default importScript

在您想要的組件上使用它：

import importScript from 'import-path'
const DesiredComponent = props => {
  importScript("/path/to/resource")
  // ... rest of the code
}