Question

我正在尝试创建一个基本的WYSIWYG编辑器，我可以在其中单击侧边栏中的元素，并将这些元素写入iFrame页面。

我当前的设置是让我创建一个JSX元素数组，然后通过contentDocument写入调用将其写入react-iframe。

问题是，现在当我尝试添加这些组件时，我在iFrame中打印了一个[object Object]。尝试使用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

charlieftl的想法奏效了：

一个建议是将所有这些内容传递给您在屏幕外呈现的组件，并使用ref或ReactDOM.findDOMNode访问外部元素，然后获取它的externalHTML写入iframe

在React中将HTML写入iFrame，获得[object Object]

1 个答案: