0

我用 Python 和 Jupyter Notebook 创建了一个 HTML 文件，其中包含用 Plotly 制作的图表。当我在浏览器中打开 HTML 文件时，我可以很好地看到图表。

当我尝试使用 dangerouslySetInnerHTML 在我的 React 应用程序中插入这个 HTML 文件时，就会出现问题。我可以看到，对于每个包含 Plotly 图的 Jupyter 代码单元，正在生成一个 div，如下所示：

<div class="jp-Cell jp-CodeCell jp-Notebook-cell  jp-mod-noInput">
 <div class="jp-Cell-outputWrapper">
  <div class="jp-OutputArea jp-Cell-outputArea">
   <div class="jp-OutputArea-child">
    <div data-mime-type="text/html" class="jp-RenderedHTMLCommon jp-RenderedHTML jp-OutputArea-output">
     <div>
      <div style="height:500px; width:800px;" class="plotly-graph-div" id="d8f872f4-8de2-4892-b3fb-842a376f21ee">
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

但是其中没有呈现任何内容。我目前正在尝试使用以下代码执行此操作：

function Report(props) {
    return (
        <div>
            <div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(props.report)}} />        
        </div>
    );
  }

关于为什么会发生这种情况的任何想法？是否有任何替代危险的SetInnerHTML？我无法在任何地方找到解决此问题的方法。

谢谢！

4

0 回答 0