如何在 React 中显示 XML 数据
介绍
React 是一个流行的 JavaScript 库，用于完美地创建动态且可重复使用的用户界面元素。XML 是最古老的文件格式，通常用于管理数据库数据并在互联网上共享，因为它是获取响应和向服务器发送请求的一种选择。
在本指南中，您将学习如何使用来自服务器的 XML 数据并将其呈现到 React 应用程序中。
从服务器获取 XML 数据
React 没有内置机制来获取和显示数据，但有大量 XML 解析库可用于此目的。在开始 React 应用指南之前，您必须有要显示的 XML 数据，您可能需要从服务器收集这些数据。
要从服务器获取数据，请使用 HttpClient Axios，它是使用下面的npm命令安装的。
npm install axios
现在您已经安装了 Axios，请创建一个新组件，例如ParseXml.jsx，并实现componentDidMount()生命周期钩子，如下所示。
componentDidMount() {
var self = this;
axios
.get("https://fakerestapi.azurewebsites.net/api/Authors", {
"Content-Type": "application/xml; charset=utf-8"
})
.then(function(response) {
self.setState({ authors: response.data });
})
.catch(function(error) {
console.log(error);
});
}
在上面的代码行中，伪造的 RestAPI 从此 URL 获取 XML 数据。
https://fakerestapi.azurewebsites.net/api/Authors
您可以使用任何您想要的 API 数据；此示例仅用于本指南。
从服务器得到响应后，需要将数据存储在组件的某个地方，而本地状态是首选。
.then(function(response) {
self.setState({ authors: response.data });
})
您可以观察到响应来自服务器，并将数据存储在名为作者的状态变量中，然后可用于向最终用户显示数据。
在 React 应用中显示 XML 数据
到目前为止，在本指南中，您已使用 HttpClient 从服务器获取 XML 数据。下一步是以各种方式向客户显示 XML 解析数据。
使用内容类型作为 XML
从服务器获取数据时，指定内容类型为 XML。
axios
.get("https://fakerestapi.azurewebsites.net/api/Authors", {
"Content-Type": "application/xml; charset=utf-8"
})
因此，一旦您触发 API，响应就会被解析到对象中，从而可以轻松使用和操作对象数据。
render() {
const { authors } = this.state;
return (
<div>
Parse XML using ReactJs
{(authors && authors.length > 0) &&
authors.map((item) => {
return (
<span>{item.FirstName}</span>
)
})
}
</div>
);
}
在上面的例子中，状态值为authors，你可以从服务器获取作者列表。使用.map()函数可以帮助你迭代数组项。
使用第三方 XML 解析库
您已经了解了如何使用 API 获取 XML 数据并将其显示给用户。或者，您可以使用各种第三方库，其中包括：
- xml-to-react
- xml2js
- xml 转 json
- xml-js
- react-xml-parser
这些是可用于在 React 应用中解析 XML 数据的少数库。让我们尝试其中一个。
在使用该库之前，您需要安装它。我将在本指南中演示xml2js库。
npm install xml2js
安装库后，实现库功能。
render() {
let parser = new xml2js.Parser();
parser.parseString(
`<email>
<to>Test</to>
<from>Test1</from>
<heading>Test email</heading>
<body>Email regards to xml data parsing in React</body>
</email>`,
function(err, result) {
console.log(result);
}
);
return <div>Parse XML using ReactJs</div>;
}
正如您在上面的示例中看到的，使用的解析器是xml2jsParser()，它从库中初始化解析器函数。
初始化解析器后，下一步是使用函数parseString()向解析器提供 XML 数据，该函数接受有效的 XML 数据。
一旦执行上述示例，控制台日志应如下所示。
XML 数据被完全转换为 JavaScript 对象，并且 XML 的每个子对象都是父对象的子子对象，如您在屏幕截图中所见。
这就是如何使用第三方库将来自内部或外部源的 XML 数据解析为对象或 JSON。
结论
React 是一个 JavaScript 库，JavaScript 中的所有内容都是对象，但有时您可能需要访问各种格式，例如 XML 和 JSON，因此解析对象非常容易。
在本指南中，您学习了如何使用响应的内容类型和第三方库来解析 XML 数据并将其显示给用户。希望对您有所帮助！
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~