Javascript 在react中呈现html div

'一旦我在plotly中生成一个简单的图形并将其保存为html div元素，我如何在react应用程序中渲染它？现在已经有了危险的问题和解决方案。事实是react应用程序不呈现它也不会抛出任何错误，即使使用库DOMPrify，所以我想知道我是否遗漏了什么，或者使用它是关于plotly的任何问题

使用Networkx创建Python图形

导入matplotlib.pyplot作为plt
随机输入
将networkx导入为nx
导入plotly.graph_对象作为go
将plotly.io作为pio导入
绘声绘色地导入
#networkx的一个简单图
G=nx.路径图（8）
#图形设置；位置、文字等
位置=nx.弹簧布置图（G）
对于范围内的i（len（G.nodes））：
G.nodes[i][“pos”]=pos[i]
边=['E_u'+str（i）表示范围内的i（len（G.nodes））]
边缘_x=[]
边缘_y=[]
ytext=[]
xtext=[]
对于G.边（）中的边：
x0，y0=位置[边缘[0]]
x1，y1=位置[边缘[1]]
xtext.append（（x0+x1）/2）
Y文本追加（（y0+y1）/2）
边附加（x0）
边附加（x1）
边缘附加（无）
边y.追加（y0）
边y.附加（y1）
边缘附加（无）
#构建绘图仪对象实例ans设置
边缘跟踪=开始分散(
x=边x，y=边y，
线条=笔迹（宽度=0.5，颜色='#888'），
hoverinfo='none'，
模式（行）
节点_x=[]
节点_y=[]
对于G.nodes（）中的节点：
x、 y=位置[节点]
节点x.append（x）
节点_y.追加（y）
边缘文本=[f'id:{n}表示边缘中的n]
边缘跟踪=开始分散(
x=边x，y=边y，
hoverinfo='text'，
文本=边缘文本，
线条=笔迹（宽度=0.5，颜色='#888'），
textposition='middle center'，
textfont=dict(
尺寸=5
),
模式（行）
eweights_trace=go.Scatter（x=xtext，y=ytext，
mode='text'，
悬停文本=边，
hoverinfo='text'，
标记大小=0.5，
textposition='top center'，
)
colormap=[“FF0000”表示范围内的i（len（G.nodes））]
符号=[1表示范围内的i（len（G.nodes））]
names=[“N_389;”+str（i）代表G.nodes（）中的i]
描述=[“foo”，“bar”，“buz”，“qux”，“qux”，“quz”，“foo”，“bar”，“buz”，“qux”，“qux”，“quz”]
类型=[“科奇”、“格劳特”、“加普利”、“沃尔多”、“弗雷德”、“普拉格”、“XYZY”、“砰”、“科奇”、“格劳特”、“加普利”、“沃尔多”，]
node_text=[f'id:{i}
描述：{j}
类型：{k}
名称：{l}
协调：{m}
i、 zip中的j、k、l、m（G.节点（），描述，类型，名称，位置值（））]
节点_trace=go.Scatter(
x=节点x，y=节点y，
mode='markers'，
标记符号=符号，
hoverinfo='text+x+y'，
文本=节点\文本，
记号笔(
showscale=False，
色阶='热'，
反向刻度=真，
颜色=[]，
尺寸=15，
色条(
厚度=0，
xanchor='left'，
标题旁边的“='right'
),
线条（宽度=2））
节点_邻接=[]
节点_text=[]
对于节点，枚举中的邻接（G.adjacency（））：
node_adjaccines.append（len（adjaccines[1]））
node\u text.append（描述[节点]）
节点_trace.marker.color=colormap
layout=go.layout（autosize=False，
宽度=500，
高度=500，
title=“
示例”的图形，
titlefont_尺寸=24，
showlegend=False，
hovermode='closest'，
裕度=dict（l=5，
r=5，
b=10，
t=10，
pad=2），
注释=[dict](
showarrow=False，
xref=“纸张”，yref=“纸张”，
x=0.005，y=-0.002）]，
xaxis=dict（showgrid=False，zeroline=False，showticklabels=False），
yaxis=dict（showgrid=False，zeroline=False，showticklabels=False））
fig=go.Figure（数据=[边缘跟踪，节点跟踪，eweights跟踪]，布局=布局）；
#如果需要验证
图2（图3）
#另存为div
divastext=plotly.offline.plot（图，包括_plotlyjs=True，输出_type='div'）
文件=打开（“divastext.txt”、“w”）
file.write（divastext）
file.close（）文件

JavaScript和React部分

import'/App.css'；
从“dompurify”导入createDOMPurify
从“JSDOM”导入{JSDOM}
常量窗口=（新JSDOM（“”））.window
const domprify=createdomprify（窗口）
函数App（）{
getGraph（）；
异步函数getGraph（）{
const response=wait fetch（“divastext.txt”）；
const rawHTML=wait response.text（）；
}
返回(
{  }
);
}
导出默认应用程序；

有没有更干净的方法可以在react中渲染这个绘图仪生成的div？ 非常感谢。我想应该是这样的

<div dangerouslySetInnerHTML={{ _html: rawHTML}}></div> 

因为你已经用下面的花括号把你的div包起来了

 { <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawHTML_) }} /> }

{}

这有点让人困惑，但我认为您可以使用大写字母保存divastext，并像处理任何其他组件一样呈现它：

。你能试试吗？

试试这一次。你已经在div中使用了大括号，而且它不是必需的。你的

getGraph

-函数是异步的，因此在呈现HTML时没有定义

rawHTML

变量。您应该改为将html存储在状态变量中，以确保收到数据时React将重新呈现。谢谢，我会尝试一下。不管怎样，我也尝试不使用异步函数。我看到div是在DOM中呈现的，但仍然没有看到它。这就是为什么我可能在一个非常基本的问题上大错特错的原因。当然，但您指的是：

const rawHTML\uux=divastext的加载内容

？这只是一个原始文本，由fetch加载。我只是避免把可能没有多大意义的事情放在这个背景下。但无论如何，这只是一个文本我以为你是想用这个而不是你写的文本：

#将它另存为div divastext=plotly.offline.plot（图，include_plotlyjs=Tr
<div dangerouslySetInnerHTML={{ _html: rawHTML}}></div> 

 { <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawHTML_) }} /> }