我如何在React组件中插入HTML页面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我如何在React组件中插入HTML页面相关的知识,希望对你有一定的参考价值。

我仍在学习react,我需要知道如何将外部html页面(index.html)插入组件中的react应用。换句话说,此index.html显示了具有所有功能的在线文本编辑器,我需要将该编辑器显示在我的react应用程序的组件中]


index.html

<!DOCTYPE html>
<!-- Web Application -->
<html>
  <head>
    <title>Texture Editor</title>
    <meta charset="UTF-8">
    <style>
      @import '../texture.css';
      @import '../texture-reset.css';
      @import '../lib/katex/katex.min.css';
      @import '../lib/inter-ui/inter.css';
      @import '../lib/font-awesome/css/font-awesome.min.css';
      body  overflow: hidden; 
      html, body  height: 100%; 
      .sc-app 
        height: 100%;
      
    </style>
    <script type="text/javascript" src="./lib/substance/substance.js"></script>
    <script type="text/javascript" src="./lib/katex/katex.js"></script>
    <script type="text/javascript" src="./texture.js"></script>
    <script type="text/javascript" src="../plugins/texture-plugin-jats/texture-plugin-jats.js"></script>
    <script type="text/javascript" src="./demo/vfs.js"></script>
    <script type="text/javascript" src="./demo/demo.js"></script>
  </head>
  <body>
  </body>
</html>
答案
const Iframe = src => <iframe src=src height="500" width="500"/>; ReactDOM.render( <Iframe src="http://localhost:3000/index.html" />, document.getElementById('app') );

以上是关于我如何在React组件中插入HTML页面的主要内容,如果未能解决你的问题,请参考以下文章

在 React 组件中使用的字符串变量中插入 html

React:如何在页面中两次渲染组件?

如何使用 React 创建多页应用程序

如何在 React 组件中插入使用 js 创建的 iframe

如何在子元素之后插入“React”组件?

如何使用 React-Intl 插入带有 injectIntl​​ formatMessage 的 HTML 标记?