显示NextJS中的HTML元素

Question

我有一个返回html的api(在html中转换的图形)，我想在我的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):图

这是我在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>

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

Answer 1

你可以使用reactdangerouslySetInnerHTML将HTML渲染成元素。https://reactjs.org/docs/dom-elements.html

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