將JS腳本標簽添加到React

Question

我在服務器上有一個script.js文件，該文件使用純javascript（香草）編寫，並返回了具有某些功能的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; 

渲染具有所有腳本標簽但分辨率為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()
}