Question

我想在我的react组件中添加

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

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

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

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

将此脚本添加到index.html

之后

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

如果您在App.js（或任意位置）中console.log（window），则可能会检查可用功能。一旦检查了确切的功能，就可以像

那样使用它

window.A.sort();

我认为这可能是最简单的方法。请记住，您必须编写“窗口”。在功能的左侧。

Answer 4

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

或者，如果您无法对其进行编辑或不使用它，则可以使用大量插件来解决此问题，例如react-load-script

Answer 5

有时，在这种情况下，我们需要使用外部js库，我们需要在组件中插入脚本标签，但是在反应中，我们使用jsx，因此我们不能像在HTML中添加脚本一样直接添加脚本标签。

在此示例中，我们将看到如何将外部脚本文件加载到head，body元素或组件中。

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 6

您可以使用React头盔npm

第1步：npm我反应头盔

第2步：

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

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

6 个答案: