如何将XML数据显示为html页面,该页面支持ReactJS中的折叠和扩展功能

如何将XML数据显示为html页面,该页面支持ReactJS中的折叠和扩展功能,html,xml,reactjs,formatting,collapse,Html,Xml,Reactjs,Formatting,Collapse,我想用正确的XML格式将XML数据显示到html页面中,该页面将具有另一个功能折叠和展开,我想在JS中完成。 我发现了一个名为的react组件,它只支持格式功能,但我需要额外的功能折叠/扩展节点 我的XML字符串是 <TRNXML Version = "1.0.0"> <DateTimeStamp TimeZone="ET">02/06/2020 02:17:17</DateTimeStamp> <Sender><SenderID>TR

我想用正确的XML格式将XML数据显示到html页面中,该页面将具有另一个功能折叠展开,我想在JS中完成。 我发现了一个名为的react组件,它只支持格式功能,但我需要额外的功能折叠/扩展节点

我的XML字符串是

<TRNXML Version = "1.0.0"> <DateTimeStamp TimeZone="ET">02/06/2020 02:17:17</DateTimeStamp> <Sender><SenderID>TRN</SenderID><SenderName>Transportation Reservation System,Inc.</SenderName></Sender> <Message> <MessageID>RSPREZ</MessageID> <MessageDescription>Respond With Confirmation</MessageDescription> </Message> <ConfirmNum>FFX011B113</ConfirmNum> <TotalPricing> <LateCharge>0.00</LateCharge> <Surcharge>0.0000</Surcharge> <Taxes> <Tax3Desc>FLTAX 7.0%</Tax3Desc> <Tax3Charge>10.52</Tax3Charge> <Tax3Type>PERCENT</Tax3Type> </Taxes> <DailyExtra> <ExtraCode>ATS</ExtraCode> <ExtraDesc>PLATEPASS ALL INCLUSIVE</ExtraDesc> <ExtraAmount>62.93</ExtraAmount> <ExtraAutoApply>FALSE</ExtraAutoApply> </DailyExtra> <CurrencyCode>USD</CurrencyCode> </TotalPricing> <RateID>65275331</RateID> </TRNXML>
2020年02月06日02:17:17 TRNTransportation Reservation System,Inc.RSPREZ回复确认FFX011B113 0.00 0.0000 FLTAX 7.0%10.52%ATS平板通过率全包62.93假65275331美元
看到下面的图片,我想看到它像这样(格式),这将允许我折叠和扩展每个节点。我还可以选择“全部折叠”和“全部展开”


您能做到这一点吗?是的。我用JQuery插件实现了它。你能实现吗?是的。我使用JQuery插件来实现它。