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

Question

我有一堆 XML 文件（大约 100 个文件），我需要使用正确的导航和样式在 React 应用程序中渲染它们。 这些 XML 可以具有不同 XML 文件的锚点以进行导航，也可以具有 xml-stylesheet 引用。我已经将 JHipster 的 React Template 用于 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，而不是转换后的版本。

Answer 1

xslt-处理器

使用npm或yarn安装xslt处理器：

npm 安装 xslt 处理器 纱线添加 xslt 处理器 在 ES2015+ 代码中，导入 Xslt 类、XmlParser 类并使用以下方式：

import { Xslt, XmlParser } from 'xslt-processor'

// xmlString: string of xml file contents
// xsltString: string of xslt file contents
// outXmlString: output xml string.
const xslt = new Xslt();
const xmlParser = new XmlParser();
const outXmlString = xslt.xsltProcess(
    xmlParser.xmlParse(xmlString),
    xmlParser.xmlParse(xsltString)
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>