在 NextJS 中显示 HTML 元素答案

【问题标题】：Show HTML element in NextJS在 NextJS 中显示 HTML 元素
【发布时间】：2021-11-09 20:08:27
【问题描述】：

我有一个返回 html（转换为 html 的图形）的 api，我想在我的 nextjs 页面中显示这个 html，但我不知道如何。这是我的api代码：

@router.get("/graph/{id_file}", name="Return the graph obtained")
async def create_graph(id_file: str):
        data = HAR.preparaDatos(id_file)
        dataFinal = HAR.dataYprediccion(data, 'routes/modelo.h5')
        fig = px.scatter(dataFinal, x=dataFinal['dateTimes'], y=dataFinal['nameActivities'])
        ht=fig.to_html()
        
        return HTMLResponse(ht)

它返回这个图（在 html 中）： Graph

这是我在 nextJS 中的代码，我试图在其中显示此图表：

<div className="grid">
            <p className="description">
              In this graph you can see the activity performed.
            </p>
            {isLoading && <p className="loading">Loading graph...</p>}
            <p className="graph">
                <script src={`http://127.0.0.1:8000/showGraph/graph/${id}`} />
            </p>

但我最终无法在我的页面上看到图表，有人知道可能出了什么问题吗？

【问题讨论】：

返回类型是图片吗？如果是这样，您并没有告诉浏览器在任何地方渲染图像

标签： javascript html next.js fastapi

【解决方案1】：

您可以使用 Reacts dangerouslySetInnerHTML 将 HTML 渲染到元素中。 https://reactjs.org/docs/dom-elements.html

<div dangerouslySetInnerHTML={{__html: yourHTML}} />

【讨论】：