在 NextJS 中显示 HTML 元素

Question

我有一个 api，returns 一个 html（数字在 html 中转换），我想在我的 html 中显示这个 html nextjs 页面，但我不知道如何。这是我的 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)

它 returns 这张图（在 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>

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

Answer 1

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

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

在 NextJS 中显示 HTML 元素

Show HTML element in NextJS

html

javascript

next.js

fastapi