如何在我的 React 组件中渲染 html 文件

Question

我知道我们对这个问题有类似的疑问，但这里似乎没有任何作用。

我想渲染这个位于我的 React 项目根目录的页面。

appmixerStudio.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  </head>
  <body>
    <div id="flow-manager"></div>
    <div id="designer"></div>
    <script src="https://.appmixer.cloud/appmixer/appmixer.js"></script>

    <script async type="module">
      const appmixer = new Appmixer();
      const BASE_URL = "******";
      const USERNAME = "******";
      const PASSWORD = "*******";

      appmixer.set("baseUrl", BASE_URL);

      function start() {
        flowManager.on("flow:open", (flowId) => {
        flowManager.close();
        designer.set("flowId", flowId);
        designer.open();
      });
      flowManager.open();
      }

      appmixer.api.authenticateUser(USERNAME, PASSWORD).then((auth) => {
            appmixer.set('accessToken', auth.token);
            start();
      })

      const flowManager = appmixer.ui.FlowManager({ el: "#flow-manager" });
      const designer = appmixer.ui.Designer({ el: "#designer" });

    </script>
  </body>
</html>

这是我试图渲染它的地方：

import {htmlFile} from '../../../appmixerWithHTMLcontent.js';
import Page from '../../../appmixerStudio.html?raw';

const Workflow = () => {
  const template = {__html: Page}
  return (
    <div style={{ height: '100vh', marginLeft: '1.5rem', minWidth: '90%', transform: 'translateX(1.8rem)' }}>
      <div 
        style={{ height: '100%', marginRight: '1.5rem', marginTop: '2.8em' }} 
        dangerouslySetInnerHTML={template}
      />
    </div>
  )
}

export default Workflow;

在此之前，我将 html 转换为如下字符串：

export  let htmlFile = `<html lang="en">
<head>
  <meta charset="UTF-8" />
  
</head>
<body>
<script src="https://appmixer.cloud/appmixer/appmixer.js"></script>
  <div id="flow-manager"></div>
  <div id="designer"></div>

  <script async type="module">
    const appmixer = new Appmixer();

      const BASE_URL = "******";
      const USERNAME = "******";
      const PASSWORD = "*******";

    appmixer.set("baseUrl", BASE_URL);
    function start() {

      flowManager.on("flow:open", (flowId) => {
      flowManager.close();
      designer.set("flowId", flowId);
      designer.open();
    });

    flowManager.open();

      }

    appmixer.api.authenticateUser(USERNAME, PASSWORD).then((auth) => {
          appmixer.set('accessToken', auth.token);
          start();
      })

    const flowManager = appmixer.ui.FlowManager({ el: "#flow-manager" });
    const designer = appmixer.ui.Designer({ el: "#designer" });

  
  </script>
</body>
</html>

`

当我右键单击页面时，标签似乎在那里

我正在使用 Vite 和 React。 有人可以帮我吗？

Answer 1

一份 html 文档只能有一个 html 标签——您可能希望为此使用iframe或删除父根标签并仅呈现内容。

阅读下文https://stackoverflow.com/a/2035627/7358308

很高兴能帮助你：）