Запись HTML в iFrame в React, получение объекта [Object Object]

Question

Я пытаюсь создать простой редактор WYSIWYG, в котором я могу щелкнуть элементы на боковой панели и записать эти элементы на страницу iFrame.

В моей текущей настройке я создаю массив элементов JSX, которые я затем записываю вact-iframe с помощью вызова записи contentDocument.

Проблема в том, что сейчас, когда я пытаюсь добавить эти компоненты, я получаю [объект объекта], напечатанный в iFrame. При попытке выполнить JSON.stringify () указанный объект дает мне буквальную распечатку объекта, а не визуализацию самого элемента JSX.

Пожалуйста, дайте мне конструктивную критику и любые идеи о лучших путях решения этой проблемы - это была моя наивная попытка, основанная на том, что я в настоящее время знаю.

Код:

SetIFrameInnerHTML(){

 //get snapshot from React's state
    const snapshot = this.state.PagesSnapshot;

//if the snapshot exists
    if(snapshot){
    const currPage = document.querySelector('#page_selector').value;

//Variable I'll be storing array to print to page will be
    var pageTags = [];

//Fetching data from my dB and setting variables...

    snapshot.forEach(function (childSnapshot){
      let testValue = childSnapshot.val();
      if(currPage == Object.keys(testValue.pages)[0]){
      const currPage = document.querySelector('#page_selector').value;

      console.log('break');



      var tagType_pt1 = testValue.pages
      var tagType_pt2 = tagType_pt1[currPage];
      var tagType = tagType_pt2.tags[0].tag_type;

      var tagStyle_pt1 = testValue.pages
      var tagStyle_pt2 = tagStyle_pt1[currPage];
      var tagStyle = tagStyle_pt2.tags[0].style;

      var tagContent_pt1 = testValue.pages;
      var tagContent_pt2 = tagContent_pt1[currPage];
      var tagContent = tagContent_pt2.tags[0].content;

          if(tagType == 'p'){
            pageTags.push(<p style = {tagStyle}>{tagContent}</p>);
          }else if(TagType == 'img'){
            pageTags.push(<img src = {imageSrc}></img>);
          }

      }
    });

    let editorFrame = document.getElementById('iFrameId');

    // also tried: editorFrame.postMessage(pageTags, 'http://localhost:8080/', false);


    editorFrame.contentDocument.write(pageTags);

    //also tried: editorFrame.contentDocument.write(JSON.stringify(pageTags));


    }
  }



    //Rendering the iframe

    render(){
    return(
     <div>
    ... some JSX tags
    <Iframe
              id = "VisualEditorWindow"
              url = {this.props.CurrentEditPageHandle}
              ref = {this.VisualLogic}
              width = "calc(100vw - 500px)"
              height = "90vh"
              className = "iframe"
              display="initial" />

    </div>
    );
    }

Answer 1

Идея Чарлифта сработала:

Одним из предложений будет передать все это компоненту, который вы выводите за пределы экрана, и использовать ref или ReactDOM.findDOMNode для доступа к внешнему элементу, а затем получить его externalHTML для записи в iframe