Question

我在服务器上有一个script.js文件，该文件使用纯JavaScript（香草）编写，并返回了具有某些功能的HTML表单。我先通过第一个<script>标签下载它，然后使用script.js中.html文件中第二个<script>标签中的函数，它可以正常工作。但是我不知道如何在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;

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

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()
}

将JS脚本标签添加到React

1 个答案: