如何使用我添加的外部脚本来反应 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
}