reactjs - 如何在 JHipster React 应用程序中渲染一堆 XML 文件

Question

我有一堆 XML 文件（大约 100 个文件），我需要使用正确的导航和样式在 react 应用程序中呈现它们。 这些 XML 可以具有不同 XML 文件的锚点以进行导航，也可以具有xml 样式表引用。我已经为 React 应用程序使用了 JHipster 的 React 模板。现在我想使用这些静态 XML 文件并通过 React 将其呈现为 HTML。这是其中一个带有锚点和样式表参考的 XML 文件的示例。

<?xml-stylesheet type="text/xsl" href="../vxml/styles/tmref.xslt"?>
<topic>
<metadata id="my_portal"
   name="VoiceXML 2.0"
   type="overview"
/>

<content>
<fm>
<p>Looking for technical information on using VoiceXML 2.0? This reference 
will help guide you through ........
</p>

   <ul class="ref">
      <li><a href="overview/">VoiceXML 2.0 Overview</a></li>
      <li><a href="ref/elements/">VoiceXML 2.0 Element Reference</a></li>
      <li><a href="ref/functions/">VoiceXML 2.0 Function Reference</a></li>
      <li><a href="ref/objects/">VoiceXML 2.0 Object Reference</a></li>
   </ul>

<note>You must upgrade that code to be compliant with VoiceXML 2.0
in order for it to continue to run on the <tvan/>.
Please refer to the <a href="overview/migration2.html">Migration Guide</a> for details.
</note>

</fm>

</content>
</topic>

引用的 tmref.xslt 示例

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="xml" omit-xml-declaration="yes" />

<!-- location of common attribute data -->
<xsl:param name="common_attrs_uri" select="'vxml2_attrs_common.xml'"/>

<xsl:variable name="str_element_unsupported">Some static text</xsl:variable>

<xsl:template match="/">
    <xsl:apply-templates select="/topic"/>
</xsl:template>

<xsl:include href="util.xslt"/>
<xsl:include href="refutil.xslt"/>
<xsl:include href="studio/reg_util.xslt"/>

<xsl:include href="globalparams.xslt"/>

<xsl:include href="grammar.xslt"/>
</xsl:stylesheet>

我已经为 npm 库使用了几个进行反应，以实现正确的渲染，但大多数尝试的结果只是 XML，因为它在浏览器屏幕上而不是转换后的版本。

标签： reactjsxmlxsltjhipsterjhipster-gateway