将 JS 脚本标签添加到 React

Question

我在服务器上有一个 script.js 文件，它是用纯 javascript (vanilla) 编写的，并返回具有某些功能的 HTML 表单。 我通过第一个 <script> 标签下载它，并在 .html 文件中的第二个 <script> 标签中使用 script.js 中的函数，它正在工作。但我不知道如何让它在 React 中运行。我尝试这样做，但没有工作。

script.js

var lib = lib || (function() {
  var _args = {};

  return {
    init: function(Args) {
      _args = Args;
    },
    func: function() {
      ...some logic and use document.write
      for render
    }
  }
}())

在 HTML 中，它可以工作

<script src='http://someurl.com/checkout'></script>
<script>
  lib.init(...some args);
  lib.func();
</script>

在 React 中，它不起作用

import React, {
  Component
} from 'react';
import axios from "axios";

class Checkout extends Component {

  state = {}

  componentDidMount = async() => {
    axios.get("http://someurl.com/checkout")
      .then(res => {
        const scriptInit = document.createElement("script");
        scriptInit.src = "http://someurl.com/checkout";
        // or scriptInit.text = res.data;
        scriptInit.type = "text/javascript";
        scriptInit.async = true;
        const scriptFunc = document.createElement("script");
        scriptFunc.text = "lib.init(...); lib.func();";
        scriptFunc.async = true;
        const script = scriptInit.outerHTML + scriptFunc.outerHTML;
        this.setState({
          script
        });
      })

  }

  render() {
    const __html = this.state.script || "";
    return <div id = "checkout"
    dangerouslySetInnerHTML = {
      {
        __html
      }
    }
    />
  }
}

export default Checkout;

使用所有脚本标签渲染 div 标签，但分辨率为 1110 x 0

Answer 1

您需要在脚本加载后调用这些函数。您不需要 axios，您可以使用脚本加载的 onload 回调来实现这一点。

componentDidMount(){
 const script = document.createElement("script");
 document.head.appendChild(script);
 script.src = "http://someurl.com/checkout";
 script.async = true;
 script.onload = () => this.runScriptMethods();
}

runScriptMethods(){
  lib.init(...);
  lib.func()
}