ReactJS和XML

Question

我正在尝试使用React制作RSS阅读器。我遇到一些RSS源（http://www.economist.com/sections/economics/rss.xml）的元素包含在CDATA部分并包含HTML标记。什么是“反应”方式来处理这个问题？

我的理解是，通常情况下，如果使用常规的JavaScript/jQuery来解析XML文档，你将刚才得到的数据，并将其直接写HTML文档，像

document.getElementById('target').innerHTML 
=xmlDoc.getElementsByTagName('description')[0].childNodes[0].data 

但由于React使用虚拟DOM，你不能这样做。如果你尝试做

import React from 'react' 

const Component = (props) => { 
    return (
    <div>{xmlDoc.getElementsByTagName('description')[0].childNodes.data}</div> 
) 
} 

export default Component 

将显示部分作为一个完整的HTML标签的字符串。

我想知道是否有正确或首选的方式来处理这个问题。我知道危险地设置了IntentHTML，但是如果可能的话，宁愿避免这种情况，因为React似乎不鼓励人们使用它。现在我正在乱搞DomParser，并试图从CDATA字符串中提取特定的标签，我不得不怀疑是否有更好的方法，我无法通过Google找到并阅读文档。

Answer 1

dangerouslySetInnerHTML在这里使用是正确的。这个名字实际上意味着提醒人们小心谨慎，而不是使用它的威慑力。随着阵营文档说（https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml）：

一般来说，从代码中设置HTML是有风险的，因为它很容易给你的用户在不经意间暴露在跨站点脚本（XSS）攻击。因此，您可以直接从React中设置HTML，但必须输入危险的SetInnerHTML并使用__html键传递对象，以提醒自己危险。

因此，您确实需要小心并防范XSS攻击。这涉及清理任何传递给dangerouslySetInnerHtml的html。这对你的用例特别重要，因为你不能控制你正在使用的html。 DOMPurify是一个图书馆，可以帮助你：https://github.com/cure53/DOMPurify。