React 中嵌入 Datawrapper 地图失败的常见原因与解决方案-html教程-PHP中文网

React 中嵌入 Datawrapper 地图失败的常见原因与解决方案

开发环境正常但生产环境地图不显示，通常源于 html 字符串中 script 标签的路径错误、html 实体转义问题或 react 组件导出方式不当；核心需检查资源路径是否为绝对 url、避免 dangerouslysetinnerhtml 中嵌入相对路径脚本，并确保组件正确导出。

开发环境正常但生产环境地图不显示，通常源于 html 字符串中 script 标签的路径错误、html 实体转义问题或 react 组件导出方式不当；核心需检查资源路径是否为绝对 url、避免 dangerouslysetinnerhtml 中嵌入相对路径脚本，并确保组件正确导出。

在 React 应用中，将外部 HTML（如 Datawrapper 嵌入代码）通过 dangerouslySetInnerHTML 渲染是常见做法，但极易因构建与运行时环境差异导致线上失效。你遇到的错误 Uncaught SyntaxError: expected expression, got ' 是典型信号——说明浏览器实际接收到的不是 JavaScript 代码，而是被 HTML 实体编码后的字符串（例如变成），这通常发生在：

✅ 资源路径未适配生产环境：
你使用了相对路径 <script src="src/utils/mapscript.js"></script>。在开发服务器（Vite/webpack dev server）中，该路径可能被热重载机制临时解析；但在生产构建后，src/ 目录不会发布到根路径，该请求实际返回的是 404 HTML 页面（如 Vite 默认 404 页面含 ...），浏览器将其作为 JS 执行时，首字符 就被解析为，触发语法错误。

✅ dangerouslySetInnerHTML 不支持内联 <script></script> 标签执行：
React 官方明确说明：通过 __html 注入的 <script></script> 标签不会被执行（出于安全与设计限制）。即使路径正确，mapscript.js 也不会运行——这也是为何连中的图片也不显示：React 在服务端渲染（SSR）或 hydration 过程中可能已跳过整个节点，或因脚本加载失败导致 DOM 结构异常。

✅ 组件未正确导出/导入：
非默认导出（如 export function Map1()）若未在父组件中显式解构导入（import { Map1 } from './Map1'），会导致组件为 undefined，渲染为空白。而 export default function Map2() 可直接通过 import Map2 from './Map2' 使用，兼容性更强，也更符合常规实践。

正确做法：使用绝对 URL + 外部托管 + 避免内联脚本

将 mapscript.js 部署为静态资源（如上传至 https://static.igem.wiki/teams/5247/charts-maps/mapscript.js），并在 HTML 字符串中使用完整 HTTPS URL：

export default function DatawrapperMap() {
  const htmlContent = `
    <div style="min-height: 374px;">
      <script type="text/javascript" defer src="https://static.igem.wiki/teams/5247/charts-maps/mapscript.js"></script><noscript>
        @@##@@
      </noscript>
    </div>
  `;
  return <div dangerouslysetinnerhtml="{{" __html: htmlcontent></div>;
}

增强健壮性：添加加载状态与错误处理（可选）：

Reactivation Specialist · 流失召回

适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p

下载

import { useEffect, useRef } from 'react';

export default function DatawrapperMap() {
  const containerRef = useRef<htmldivelement>(null);

  useEffect(() => {
    if (!containerRef.current) return;
    // 动态插入 script（绕过 dangerouslySetInnerHTML 的执行限制）
    const script = document.createElement('script');
    script.src = 'https://static.igem.wiki/teams/5247/charts-maps/mapscript.js';
    script.defer = true;
    script.onerror = () => {
      console.error('Failed to load Datawrapper map script');
      if (containerRef.current) {
        containerRef.current.innerHTML = `
          @@##@@
        `;
      }
    };
    containerRef.current.appendChild(script);
  }, []);

  return <div ref="{containerRef}" style="{{" minheight:></div>;
}</htmldivelement>

关键注意事项总结：

❌ 禁止在 dangerouslySetInnerHTML 中使用 src="./xxx.js" 或 src="src/xxx.js" 等相对路径；
✅ 所有外部资源（JS/CSS/图片）必须使用可公开访问的绝对 URL；
✅ 推荐 export default function ComponentName() 形式导出，避免导入歧义；
⚠️ dangerouslySetInnerHTML 仅注入 HTML 结构，不执行其中 <script></script>；如需动态执行，请用 document.createElement('script') 显式挂载；
? 生产环境务必检查浏览器开发者工具的 Network 标签页：确认 mapscript.js 是否返回 200（而非 404/HTML 页面），并查看 Response 内容是否为真实 JS 代码。

遵循以上方案，即可彻底解决开发与生产环境行为不一致的问题，确保 Datawrapper 地图稳定可靠地嵌入 React 应用。