如何使用Reactjs显示xml数据

Question

我想将React JS的输入作为XML格式而不是json格式。所以请回答如何在React js中显示XML。

Answer 1

我建议你将xml数据解析为Javascript对象。你可以xml2js library为此目的。

Answer 2

这是我的代码

“未捕获的TypeError：this.props.data.map不是函数”

运行此代码时出错。当我将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;
}

Answer 3

我知道这是一个老帖子，但可能会帮助一些人。要显示XML数据，我只使用pre元素。如果您不需要像崩溃/解除崩溃节点这样的额外功能，那么这应该适合您。

<pre className="xml-body">
    {this.props.xmlstr}
</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;
}

希望这有助于某人:)

Answer 4

# 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'.