我尝试读取 xml 文件并解析它react-xml-parser
图书馆。
var XMLParser = require('react-xml-parser');
var xml = new XMLParser().parseFromString(xml_string);
console.log(xml);
console.log(xml.getElementsByTagName('Row'));
在这里,它应该从字符串读取,但我需要从文件中获取它。
我的 xml 文件位于目录:xmldata/list.xml
,所以我现在不知道该怎么做。
尝试了这个代码:
import XMLData from '../../xmldata/list.xml';
function ReadData() {
var jsonDataFromXml = new XMLParser().parseFromString(XMLData);
console.log(jsonDataFromXml);
console.log(jsonDataFromXml.getElementsByTagName('Row'));
}
}
}
结构文件夹
-src
|—views
|—AdminScreen
|—AdminScreen.js <-here used list.xml
|—xmldata
|—list.xml
但结果是:
bundle.js:81 Uncaught TypeError: Cannot set property 'value' of undefined
at bundle.js:81
at Array.map (<anonymous>)
at e.value (bundle.js:76)
at e.value (bundle.js:148)
at ReadData (AdminScreen.js:36)
at AdminScreen (AdminScreen.js:14)
at renderWithHooks (react-dom.development.js:15821)
at mountIndeterminateComponent (react-dom.development.js:18141)
at beginWork$1 (react-dom.development.js:19357)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:466)
at beginWork$$1 (react-dom.development.js:24570)
at performUnitOfWork (react-dom.development.js:23505)
at workLoopSync (react-dom.development.js:23480)
at renderRoot (react-dom.development.js:23155)
at scheduleUpdateOnFiber (react-dom.development.js:22653)
at scheduleRootUpdate (react-dom.development.js:25686)
at updateContainerAtExpirationTime (react-dom.development.js:25712)
at updateContainer (react-dom.development.js:25812)
at react-dom.development.js:26370
at unbatchedUpdates (react-dom.development.js:22952)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:26369)
at Object.render (react-dom.development.js:26460)
at Module../src/index.js (index.js:30)
at __webpack_require__ (bootstrap:785)
at fn (bootstrap:150)
at Object.0 (index.js:2)
at __webpack_require__ (bootstrap:785)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
要读取本地文件,您有两种选择:使用 XMLHttpRequest 或 axios。
使用 XMLHttpRequest:
import XMLData from '../../xmldata/list.xml';
var rawFile = new XMLHttpRequest();
rawFile.open("GET", XMLData, false);
rawFile.onreadystatechange = () => {
if (rawFile.readyState === 4) {
if (rawFile.status === 200 || rawFile.status == 0) {
var xmlasstring = rawFile.responseText;
console.log('Your xml file as string', xmlasstring)
}
}
我建议使用 axios bcz,在使用 Reactjs 时它是更方便、更好的选择
使用 axios:
import XMLData from '../../xmldata/list.xml';
axios.get(XMLData, {
"Content-Type": "application/xml; charset=utf-8"
})
.then((response) => {
console.log('Your xml file as string', response.data);
});
现在,在获取 xml 后,您可以根据需要使用 npm 包(例如 React-xml-parser、xml2js)来创建对象或 json。我建议使用 xml2js,它很好。我相信现在您还可以发送“POST”请求来更新您的 xml(如果您愿意)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)