如何在使用react-router-dom的React项目中引入含脚本的HTML文件？

方案1：修复iframe集成问题 #

iframe报错大多是路径、权限或脚本加载顺序问题，按以下步骤调整：

• 将GraphEditor的所有静态资源（html、js、css、图片等）复制到React项目的public目录下，比如新建public/mxgraph-editor文件夹存放
• 编写iframe组件时使用绝对路径，并按需配置sandbox权限避免安全限制：

import React from 'react';

const MxGraphEditor = () => {
  return (
    <iframe
      src="/mxgraph-editor/index.html"
      width="100%"
      height="800px"
      frameBorder="0"
      title="MxGraph Editor"
      sandbox="allow-scripts allow-same-origin allow-forms"
    />
  );
};

export default MxGraphEditor;

• 检查GraphEditor原HTML里的脚本、样式路径，全部改为相对路径（比如./js/mxClient.js），确保资源能正确加载
• 本地开发时，public目录下的资源和React项目同域，不会出现跨域问题

方案2：用npm包引入MxGraph（推荐） #

直接用HTML脚本容易和React打包机制冲突，更稳定的方式是依赖npm包：

• 安装MxGraph：

npm install mxgraph --save

• 封装React组件，手动初始化编辑器逻辑：

import React, { useEffect, useRef } from 'react';
import mx from 'mxgraph';

// 初始化mxGraph全局对象，配置资源路径
const { mxGraph, mxClient, mxEditor, mxUtils } = mx({
  mxImageBasePath: '/mxgraph/images',
  mxBasePath: '/mxgraph'
});

const MxGraphEditor = () => {
  const editorContainerRef = useRef(null);

  useEffect(() => {
    // 检查浏览器兼容性
    if (!mxClient.isBrowserSupported()) {
      mxUtils.error('当前浏览器不支持MxGraph', 200, false);
      return;
    }

    // 创建编辑器实例并挂载到容器
    const editor = new mxEditor();
    editor.setGraphContainer(editorContainerRef.current);

    // 加载原GraphEditor的配置文件（需复制到public/mxgraph-editor/config下）
    const config = mxUtils.load('/mxgraph-editor/config/config.xml').getDocumentElement();
    editor.configure(config);

    // 初始化默认图形（可根据需求修改）
    const parent = editor.graph.getDefaultParent();
    editor.graph.getModel().beginUpdate();
    try {
      const v1 = editor.graph.insertVertex(parent, null, 'Hello', 20, 20, 80, 30);
      const v2 = editor.graph.insertVertex(parent, null, 'World', 200, 150, 80, 30);
      editor.graph.insertEdge(parent, null, '', v1, v2);
    } finally {
      editor.graph.getModel().endUpdate();
    }

    // 组件卸载时清理编辑器
    return () => editor.destroy();
  }, []);

  return (
    <div 
      ref={editorContainerRef} 
      style={{ width: '100%', height: '800px', border: '1px solid #ccc' }} 
    />
  );
};

export default MxGraphEditor;

• 从node_modules/mxgraph/javascript/src复制images、config等静态资源到项目public/mxgraph目录，确保路径和代码配置一致

方案3：修复dangerouslySetInnerHTML的问题 #

如果坚持用这种方式，核心是解决脚本加载顺序和全局变量冲突：

• 把原HTML的脚本按依赖顺序整理，用动态加载方式确保顺序正确，同时用IIFE隔离全局变量：

import React from 'react';

const graphEditorHtml = `
<!DOCTYPE html>
<html>
<head>
  <title>Graph Editor</title>
  <link rel="stylesheet" href="/mxgraph-editor/css/editor.css" type="text/css">
</head>
<body>
  <div id="editorContainer" style="position:relative;overflow:hidden;width:100%;height:800px;"></div>
  <script type="text/javascript">
    (function() {
      // 先加载mxClient核心脚本
      const coreScript = document.createElement('script');
      coreScript.src = '/mxgraph-editor/js/mxClient.js';
      coreScript.onload = function() {
        // 按顺序加载后续依赖脚本
        const scriptList = [
          '/mxgraph-editor/js/mxToolbar.js',
          '/mxgraph-editor/js/mxEditor.js',
          // 添加其他需要的脚本
        ];
        
        const loadNextScript = (index) => {
          if (index >= scriptList.length) {
            // 所有脚本加载完成后初始化编辑器
            const editor = new mxEditor();
            editor.setGraphContainer(document.getElementById('editorContainer'));
            // 这里可以添加原HTML里的配置和初始化逻辑
            return;
          }
          
          const script = document.createElement('script');
          script.src = scriptList[index];
          script.onload = () => loadNextScript(index + 1);
          document.body.appendChild(script);
        };
        
        loadNextScript(0);
      };
      document.body.appendChild(coreScript);
    })();
  </script>
</body>
</html>
`;

const MxGraphEditor = () => {
  return <div dangerouslySetInnerHTML={{ __html: graphEditorHtml }} />;
};

export default MxGraphEditor;

• 同样要确保所有静态资源放在public目录，路径正确

内容的提问来源于stack exchange，提问作者Iman Rh