REACT Uncaught TypeError: Невозможно прочитать свойство 'load' из null

Question

Это код загрузчика iframe, он хорошо работает в компоненте класса. Я пытаюсь обработать iframe, поэтому iframe дает мне ноль, но мне нужно обрабатывать iframe. загрузить, как я могу добраться до него? может мне нужно что-то изменить в коде загрузчика?

HTMLIFrameElement.prototype.load = function(url, callback) {
  const iframe = this;
  try {
    iframe.src =
      url +
      '?rnd=' +
      Math.random()
        .toString()
        .substring(2);
  } catch (err) {
    if (!callback) {
      return new Promise((resolve, reject) => {
        reject(err);
      });
    } else {
      callback(err);
    }
  }
  const maxTime = 60000;
  const interval = 200;

  let timerCount = 0;

  if (!callback) {
    return new Promise((resolve, reject) => {
      const timer = setInterval(() => {
        if (!iframe) return clearInterval(timer);
        timerCount++;
        if (
          iframe.contentDocument &&
          iframe.contentDocument.readyState === 'complete'
        ) {
          clearInterval(timer);
          resolve();
        } else if (timerCount * interval > maxTime) {
          reject(new Error('Iframe load failed'));
        }
      }, interval);
    });
  } else {
    const timer = setInterval(() => {
      if (!iframe) return clearInterval(timer);
      timerCount++;
      if (
        iframe.contentDocument &&
        iframe.contentDocument.readyState === 'complete'
      ) {
        clearInterval(timer);
        callback();
      } else if (timerCount * interval > maxTime) {
        callback(new Error('Iframe load failed'));
      }
    }, interval);
  }
};

Пример поддается: https://codesandbox.io/s/winter-leaf-vgb6t

Answer 1

Я не знаю, что вы пытаетесь сделать, в этом фрагменте много ошибок, но вот пример того, как получить ссылку iframe:

import React, { useEffect, useRef } from 'react';
import './helpers/iframeLoader.js';
const currentPage = 'index.html';

const Editor = () => {
  const iframeRef = useRef();

  useEffect(() => {
    iframeRef.current.load(currentPage, () => {
      const body = iframeRef.current.contentDocument.body;
      body.childNodes.forEach(node => {
        console.log(node);
      });
    });
  }, []);

  return (
    <iframe title="iframe" ref={iframeRef} src={currentPage} frameBorder="0" />
  );
};

export default Editor;