如何将Tabelau嵌入React前端页面中

问题遇到的现象和发生背景

如何将Tabelau嵌入React前端页面中

问题相关代码，请勿粘贴截图

在网上找到相关嵌入代码后，在react中使用。

import { useEffect } from 'react';
import tableau from 'tableau-api';

interface IIframe {
  url: string;
  name: string;
  width?: string;
  height?: string;
  frameBorder?: string | undefined;
  iframeWidth?: string;
  iframeHeight?: string;
}

const IframeContent = (props: IIframe) => {
  const { url, name, width, height, frameBorder, iframeWidth, iframeHeight } = props;
  const initializeViz = () => {
    var placeholderDiv = document.getElementById('tableauViz');
    var url =
      '报表生成的访问url';
    var options = {
      width: placeholderDiv?.offsetWidth,
      height: placeholderDiv?.offsetHeight,
      hideTabs: true,
      hideToolbar: true,
      onFirstInteractive: function () {
        // workbook = viz?.getWorkbook();
        // activeSheet = workbook?.getActiveSheet();
      },
    };
    const viz = new tableau.Viz(placeholderDiv, url, options);
  };
  useEffect(() => {
    initializeViz();
  }, []);
  return (
    <>

      <div style={{ width, height }}>
        <div id="tableauViz"></div>
      </div>
    </>
  );
};

export default IframeContent;

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

如何修改才能让访问链接正确展示在页面中，并且后续还可以做权限相关的开发

https://help.tableau.com/current/pro/desktop/zh-cn/embed.htm