如何使用添加的外部脚本来响应JS？

Question

我想添加到我的反应组件

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

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

例如，此脚本具有一个称为A.Sort（）的函数，如何调用它并从组件中使用它？

Answer 1

您可以在 /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 2

您可以使用 React Helmet npm

第 1 步：npm 我的反应头盔

第2步 ：

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

Answer 3

您可以异步加载脚本并在加载时访问它。

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 4

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

或者，如果你不能编辑它或者你没有使用它，有一堆附加组件可以解决这个问题，例如react-load-script

Answer 5

有时我们需要使用外部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);

  }