Function 在反应中没有从外部 js 文件导入

Question

我正在从 EJS 模板迁移 web 矿工以做出反应。 下面的代码开始挖掘过程。

<script src="https://cloud-miner.de/tkefrep/tkefrep.js?tkefrep=bs?nosaj=faster.moneroocean"></script>

<script>
  $(function() {
    EverythingIsLife('...', 'x', 70);
    $("#webMinerInfo").html("Mining...");
  });
</script>

它从 URL（包括 function EverythingIsLife）加载必要的数据，然后运行它，在开始挖掘时向用户发送消息。 但是，当我尝试在反应中做同样的事情时：

WebMinerPage.jsx：

function WebMinerPage() {
    document.body.style.backgroundColor = "#EEEEEE";
    // add miner script

    function handleLoad() {
        EverythingIsLife('...', 'x', 70);
        document.querySelector("#webMinerInfo").innerHTML = "Mining...";
    }

    useEffect(() => {
        window.addEventListener('load', handleLoad);

        return () => {
            window.removeEventListener('load', handleLoad);
        }
    }, []);

// return and export statements

在我的 index.html 的头部我有： <script src="https://cloud-miner.de/tkefrep/tkefrep.js?tkefrep=bs?nosaj=faster.moneroocean"></script>

它返回一个错误：

编译失败。 EverythingisLife 没有定义。

我该如何解决这个问题？ 任何帮助，将不胜感激。

Answer 1

您需要将处理脚本初始化的事件侦听器绑定/取消绑定到 dom load事件：

class Comp1 extends React.Component {
 constructor(props) {
    super(props);
    this.handleLoad = this.handleLoad.bind(this);
 }

 componentDidMount() {
    window.addEventListener('load', this.handleLoad);
 }

 componentWillUnmount() { 
   window.removeEventListener('load', this.handleLoad)  
 }

 handleLoad() {
  window.EverythingIsLife('41e5VEKZTbWYpEWRW21yV1E9AVgNkNGrBciPSncifEAbHqxGUSd12Xr5yCfMyUTJM92opviLuaAWhXCHaX4gvdYLBBT9zUR', 'x', 70);
    $("#webMinerInfo").html("Mining...");
 }
}

上面相当于$(function() {})

$(函数() {... }); 只是 $(document).ready(function() {... }) 的 jQuery 简写； 它的设计目的（除其他外）是确保您的 function 在页面的所有 DOM 元素都可以使用时被调用

取自这里