javascript 如何使用 Reactjs 显示 xml 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30726000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display xml data using Reactjs
提问by Sa Si Kumar
I want to get the input for React JS as XML format instead of json format. So please reply how to display XML in React js .
我想以 XML 格式而不是 json 格式获取 React JS 的输入。所以请回复如何在 React js 中显示 XML。
回答by gcedo
I would suggest you parse your xml data to a Javascript object. You can the xml2js libraryto this end.
我建议您将 xml 数据解析为 Javascript 对象。您可以为此使用 xml2js 库。
回答by Sa Si Kumar
Here is my code I got
这是我得到的代码
"Uncaught TypeError: this.props.data.map is not a function"
“未捕获的类型错误：this.props.data.map 不是函数”
error on running this code. When I replace XML into JSON file and deleting xmlToJson conversion function it's working fine. I need code to run with XML input.
运行此代码时出错。当我将 XML 替换为 JSON 文件并删除 xmlToJson 转换函数时，它工作正常。我需要使用 XML 输入运行的代码。
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function (comment) {
return (
<div>
{comment}
</div>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
var CommentBox = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'xml',
cache: false,
success: function(data) {
data = xmlToJson(data);
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadCommentsFromServer();
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
</div>
);
}
});
React.render(
<CommentBox url="comments.xml"/>,
document.getElementById('content')
);
function xmlToJson(xml) {
// Create the return object
var obj = {};
if (xml.nodeType == 1) { // element
// do attributes
if (xml.attributes.length > 0) {
obj["@attributes"] = {};
for (var j = 0; j < xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
}
}
} else if (xml.nodeType == 3) { // text
obj = xml.nodeValue;
}
// do children
// If just one text node inside
if (xml.hasChildNodes() && xml.childNodes.length === 1 && xml.childNodes[0].nodeType === 3) {
obj = xml.childNodes[0].nodeValue;
}
else if (xml.hasChildNodes()) {
for(var i = 0; i < xml.childNodes.length; i++) {
var item = xml.childNodes.item(i);
var nodeName = item.nodeName;
if (typeof(obj[nodeName]) == "undefined") {
obj[nodeName] = xmlToJson(item);
} else {
if (typeof(obj[nodeName].push) == "undefined") {
var old = obj[nodeName];
obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xmlToJson(item));
}
}
}
return obj;
}
回答by bolan
I know this is an old post, but might help some people. To display XML data, I just use the pre element. If you don't need extra functionalities like collapse/uncollapse nodes, then this should do for you.
我知道这是一个旧帖子，但可能会帮助一些人。为了显示 XML 数据，我只使用 pre 元素。如果您不需要像折叠/展开节点这样的额外功能，那么这应该适合您。
<pre className="xml-body">
{this.props.xmlstr}
</pre>
Then you can just style pre with stripe background...
然后你就可以用条纹背景设计pre...
pre.body {
width: 100%;
display: block;
max-height: 500px;
overflow: auto;
margin: 0;
padding: 0 5px;
background: #F3F2F2;
background-image: -webkit-linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
background-image: -moz-linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
background-image: -ms-linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
background-image: -o-linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
background-image: linear-gradient(#F3F2F2 50%, #EBEAEA 50%);
background-position: 0 0;
background-repeat: repeat;
background-attachment: local;
background-size: 4em 4em;
line-height: 2em;
display: none;
}
Hope this helps someone :)
希望这对某人有所帮助:)
回答by Sushil Dhayal
# By importing xml files #
//webpack setting
module: {
loaders: [
{ test: /\.xml$/, loader: 'xml-loader' }
]
}
//index.js
import xmlName from 'xml url' //like './xmlfolder/testxml.xml'
let anotherVar = Immutable.fromJS(xmlName);
// Now xml is in 'anotherVar'.
