如何使用 Reactjs 显示 xml 数据

Posted 2023-02-22

【中文标题】如何使用 Reactjs 显示 xml 数据

【英文标题】：How to display xml data using Reactjs

【发布时间】：2015-08-23 21:56:48

【问题描述】：

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

【参考方案1】：

我建议您将 xml 数据解析为 javascript 对象。为此您可以xml2js library。

【讨论】：

首先感谢您对我的关心。 React js 中是否有任何默认功能来获取 xml 文件。因为如果我使用外部库进行转换，可能会提高加载速度。

当我使用将 xml 转换为 json 对象时，错误抛出为“Uncaught TypeError: this.props.data.map is not a function”。

请提供一个jsfiddle，一个例子，或者发布第二个问题。

抱歉，我无法添加其他问题。您能否提供任何用于获取 xml 而不是 json 的 react js 示例代码。

Hai Edo，已经在上面添加了我的代码，请给出解决方案。

【参考方案2】：

我知道这是一篇旧帖子，但可能会对某些人有所帮助。为了显示 XML 数据，我只使用了 pre 元素。如果您不需要折叠/展开节点等额外功能，那么这应该适合您。

<pre className="xml-body">
    this.props.xmlstr
</pre>

然后你可以用条纹背景设置 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;

希望这可以帮助某人:)

【参考方案3】：

太糟糕了，你必须使用 JQuery。获取数据并使用 jquery 进行放置。

.then(response => 
            return response.text()
         )
        .then(xml => 
            console.log(xml);
            $("#place_holder").text(xml);)

【参考方案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'.