如何在React应用Render函数中嵌套HTML标签并嵌入Tableau仪表盘

在React里不能直接在JSX的<script>标签中写执行代码，JSX会将<script>解析为普通元素而非可执行脚本，正确做法是用React的useEffect钩子来处理DOM操作和脚本加载：

步骤1：添加Tableau仪表盘的DOM容器 #

首先要确保JSX中包含Tableau所需的容器div和对应的object标签（你之前的代码里缺少这个object标签，脚本无法找到目标元素）。

步骤2：用useEffect执行初始化逻辑 #

组件挂载后，通过useEffect获取DOM元素、设置尺寸并加载Tableau的API脚本。

完整代码示例：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 执行Tableau初始化逻辑
    const divElement = document.getElementById('viz1677637128726');
    if (!divElement) return;
    
    const vizElement = divElement.getElementsByTagName('object')[0];
    if (!vizElement) return;

    // 根据容器宽度设置仪表盘尺寸
    if (divElement.offsetWidth > 800) {
      vizElement.style.width = '1400px';
      vizElement.style.height = '1727px';
    } else if (divElement.offsetWidth > 500) {
      vizElement.style.width = '1400px';
      vizElement.style.height = '1727px';
    } else {
      vizElement.style.width = '100%';
      vizElement.style.height = '1827px';
    }

    // 加载Tableau API脚本
    const scriptElement = document.createElement('script');
    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
    vizElement.parentNode.insertBefore(scriptElement, vizElement);

    // 清理函数：避免组件卸载后可能的内存泄漏
    return () => {
      if (scriptElement.parentNode) {
        scriptElement.parentNode.removeChild(scriptElement);
      }
    };
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <div className="App">
      <h1>Dashboard</h1>
      <!-- 替换为你从Tableau复制的仪表盘嵌入代码中的object部分 -->
      <div id="viz1677637128726" className="tableauViz">
        <object className="tableauViz" width="1400" height="1727" style={{display:'none;'}}>
          <!-- 保留Tableau提供的object内部参数，比如param name="host_url"等 -->
        </object>
      </div>
    </div>
  );
}

export default App;

关键说明 #

• useEffect的作用：确保DOM渲染完成后再执行脚本，避免找不到目标元素的问题
• 必须保留Tableau的object标签：原代码缺少这个标签，导致脚本无法获取vizElement
• 清理函数：组件卸载时移除动态创建的脚本标签，避免不必要的资源占用

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