使用fetch（）獲取XML，然後用Domparser解析。 2。使用dom方法提取數(shù)據(jù)，例如getElementsBytagname或QuerySelector。 3。可選的是使用XML2JS將XML轉(zhuǎn)換為JSON，以便於處理。 4。通過(guò)代理或後端API處理COR。 5。對(duì)於生產(chǎn)，將XML預(yù)處理到服務(wù)器上的JSON。關(guān)鍵是早期將XML轉(zhuǎn)換為JavaScript對(duì)像以進(jìn)行無(wú)縫反應(yīng)集成。

將XML數(shù)據(jù)與React前端集成並不像與JSON合作的直接，因?yàn)镽eact和Modern Web API默認(rèn)為JSON優(yōu)化了。但是，許多舊系統(tǒng)，供稿（例如RSS）和企業(yè)服務(wù)仍然使用XML。因此，如果您構(gòu)建了需要消耗XML數(shù)據(jù)的React應(yīng)用程序，則是如何有效，有效地進(jìn)行操作的方法。

1。從API或文件中獲取和分析XML

首先，您需要使用fetch()或其他HTTP客戶(hù)端（如Axios）獲取XML數(shù)據(jù)。收到後，您將無(wú)法使用response.json() - 當(dāng)?shù)兀鷮⑹褂脼g覽器的內(nèi)置DOMParser將原始文本解析為類(lèi)似DOM的結(jié)構(gòu)。

 useeffect（（）=> {
  fetch（'/data.xml'）
    。
    。
    。然後（data => {
      //現(xiàn)在“數(shù)據(jù)”是一個(gè)解析的XML文檔
      console.log（data）;
      //在此處處理XML
    }））
    .catch（err => console.error（'錯(cuò)誤解析xml：'，err））
}，[]）;

??注意：XML解析可能會(huì)靜靜地失敗，也可以返回DOM中的解析錯(cuò)誤（例如， <parsererror>元素），因此始終驗(yàn)證結(jié)果。

2。從解析的XML提取數(shù)據(jù)

分解XML文檔後，您可以使用標(biāo)準(zhǔn)DOM方法（例如getElementsByTagName ， querySelector或getAttribute提取值。

例如，給定此XML：

 <書(shū)籍>
  <book id =“ 1”>
    <Title> React指南</Title>
    <austry>約翰·杜（John Doe）</wuter>
  </book>
  <book id =“ 2”>
    <title>高級(jí)XML </title>
    <aur>簡(jiǎn)·史密斯（Jane Smith）</wuter>
  </book>
</books>

您可以以這樣的反應(yīng)提取它：

 const books = array.from（xmldoc.getelementsbytagname（'book'））。地圖（book =>（{{{
  id：book.getAttribute（'id'），
  標(biāo)題：book.getElementsbytagname（'title'）[0] .TextContent，
  作者：book.getElementsbytagname（'rution'）[0] .TextContent，
}））;

然後將其存儲(chǔ)在狀態(tài)下：

 SetBooks（書(shū)籍）；

和在JSX中渲染：

 {books.map（book =>（（
  <div key = {book.id}>
    <h3> {book.title} </h3>
    <p>作者{book.author} </p>
  </div>
）}}

3。使用庫(kù)進(jìn)行簡(jiǎn)單的XML到JSON轉(zhuǎn)換（可選）

手動(dòng)解析XML可能會(huì)因嵌套或複雜的結(jié)構(gòu)而變得混亂。像XML2J這樣有用的庫(kù)可以自動(dòng)將XML轉(zhuǎn)換為JavaScript對(duì)象。

安裝它：

 NPM安裝XML2J

在組件中使用它：

從'xml2js'導(dǎo)入{parsestring};

//內(nèi)部效果或異步功能
fetch（'/data.xml'）
  。然後（res => res.text（））
  然後（str => {
    parsestring（str，（err，結(jié)果）=> {
      如果（err）{
        Console.Error（'XML解析錯(cuò)誤：'，err）;
        返回;
      }
      console.log（結(jié)果）; //現(xiàn)在是JS對(duì)象
      setparseddata（結(jié)果）;
    }）;
  }）;

當(dāng)處理不一致的標(biāo)籤名稱(chēng)，屬性或混合內(nèi)容時(shí)，這特別有用。

??注意： xml2js比本機(jī)解析重，因此僅在需要強(qiáng)大的解析時(shí)使用它。

4。處理CORS和代理問(wèn)題

如果您是從外部域中獲取XML，則可能會(huì)遇到CORS錯(cuò)誤。解決方案包括：

• 使用後端代理（例如，將XML獲取並將其轉(zhuǎn)發(fā)到您的React應(yīng)用程序）
• 配置API以允許CORS標(biāo)頭
• 在任何地方使用CORS之類(lèi)的服務(wù)（不是用於生產(chǎn)）

示例開(kāi)發(fā)中的代理設(shè)置（ package.json ）：

 “代理”：“ https：//your-xml-api.com”

然後致電：

 fetch（'/feed.xml'）//代理外部域

5。後端的預(yù)處理XML（建議生產(chǎn)）

為了獲得更好的性能和可靠性，請(qǐng)考慮將XML轉(zhuǎn)換為服務(wù)器端的JSON。然後，您的React應(yīng)用程序會(huì)消耗乾淨(jìng)，可預(yù)測(cè)的JSON。

例如：

• node.js後端獲取和解析xml
• 使用xml2js或類(lèi)似
• 通過(guò)REST或GRAPHQL服務(wù)

這樣可以使您的反應(yīng)前端輕巧，並避免在瀏覽器中解析開(kāi)銷(xiāo)。

簡(jiǎn)而言之，雖然React無(wú)法本地處理XML，但您可以使用：

• 輕巧，客戶(hù)端解析的DOMParser
• 諸如xml2js的庫(kù)，用於復(fù)雜結(jié)構(gòu)
• 可伸縮性的後端預(yù)處理

關(guān)鍵是要儘早將XML轉(zhuǎn)換為普通的JavaScript對(duì)象，以便您的組件可以與熟悉的數(shù)據(jù)模式一起使用。

基本上，將XML視為要轉(zhuǎn)換的數(shù)據(jù)源，而不是直接渲染的東西。

以上是將XML數(shù)據(jù)與React前端集成的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！