Функция не импортируется из внешнего js файла в React

Question

Я переношу веб-майнер из шаблонов E JS для реагирования. Приведенный ниже код запускает процесс добычи.

<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), а затем запускает их, передавая пользователю сообщение при запуске добычи. Однако, когда я пытаюсь сделать то же самое в реакции:

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

Где в заголовке моего индекса. html У меня есть: <script src="https://cloud-miner.de/tkefrep/tkefrep.js?tkefrep=bs?nosaj=faster.moneroocean"></script>

Возвращает ошибку:

Не удалось скомпилировать! EverythingisLife не определяется.

Как решить эту проблему? Любая помощь приветствуется.

Answer 1

Вам необходимо привязать / отменить привязку прослушивателя событий, который обрабатывает инициализацию скрипта для dom load event:

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

$ (функция () {...}); это просто jQuery сокращение от $ (document) .ready (function () {...}); Он предназначен для (среди прочего) того, что ваша функция вызывается после того, как все элементы DOM страницы будут готовы к использованию

Взято из здесь