reactjs - 在 reactjs 应用程序中嵌入动态 HTML 页面

Question

我正在将 JSF 应用程序迁移到 Node/React js。要求之一是在其中一个页面中显示一个从第三方动态请求的 html 页面。第三方 html 很复杂 - 它有自己的 javascript 和 css 链接来呈现画布。让我知道这是否可行。

我已经在调试器中检查了请求的 html 是否成功到达。通过将其复制到文件并在不同的浏览器中打开它来确保它是一个有效的 html 确保所有引用的脚本和 css 都可以访问 确保没有 CORS 错误尝试将 html 包装在标签中 请参见下面的压缩代码。它编译，页面的其余部分被渲染，但带有第三方 html 的 div 保持空白。如果我检查 div 我可以看到 html，但我认为没有执行任何 javascript 代码。

class STMDrwaingtDiv extends React.Component
  {
     constructor(props)
     {
        //Just create some state variables to track the http request status and 
        //store the response text
     }

     getPrevDrawing(caller)
     {
        //make http request
        //caller.setState({cnvHtml:"<object> "+prevDrawing+" </object>"});
        //I have tries wrapping the html in <object> tag - does not work
        caller.setState({cnvHtml:prevDrawing});
     }
     componentDidMount()
     {
        this.getPrevDrawing(this);
     }
     render()
     {
       //display progessbar handle errors etc.
       else
       {
         return <div dangerouslySetInnerHTML={{__html:this.state.chartHtml}} />;
       }
     }
     }

标签： reactjs

Answer 1

https://www.w3schools.com/tags/tag_iframe.asp

使用 a<iframe>而不是 a <div>。iframe 旨在用于将 HTML 文档（网页）嵌入到其他 HTML 文档中！将 iframe 的srcattr 设置为第 3 方 URL 应该会自动将其 HTML 嵌入到您的页面中。