ReactJSとXML

Question

私はReactを使ってRSSリーダーを作ろうとしています。いくつかのRSSフィード（http://www.economist.com/sections/economics/rss.xml）には、CDATAセクションに囲まれた要素があり、HTMLマークアップが含まれています。これを処理するための「リアクト」の方法は何ですか？

あなたはあなただけのデータを取得し、HTML文書に直接それを書くだろうと、XML文書を解析するために通常のJavaScript/jQueryのを使用している場合私の理解では、その通常

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タグの文字列としてセクションを表示します。

これを処理する方法が正しいかどうかやっているのかと思っていました。私はdangerouslysetInnerHTMLを認識していますが、Reactは人々がそれを使用するのを妨げるようであるため、可能な場合は避けたいと考えています。今、私はDomParserを使いこなしていて、CDATA文字列から特定のタグを抽出しようとしています.Googleで見つけてドキュメントを読むことができなかった方がいいかと思います。

Answer 1

dangerouslySetInnerHTMLは、ここで使用する正しいものです。この名前は実際にそれを使用することを妨げるものではなく、慎重であることを実際に思い出させるためのものです。インクルードが反応するドキュメントは、（https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml）と言う：それは不注意にクロスサイトスクリプティング（XSS）攻撃にユーザーを公開するのは簡単ですので、一般的には

は、コードからHTMLを設定することは危険です。したがって、ReactからHTMLを直接設定することはできますが、dangerouslySetInnerHTMLをタイプして__htmlキーを使用してオブジェクトを渡す必要があり、危険であることを思い出させる必要があります。

XSS攻撃から慎重に保護する必要があります。これには、dangerouslySetInnerHtmlに渡されたすべてのHTMLのサニタイズが含まれます。これは、使用しているhtmlを制御できないため、ユースケースにとって特に重要です。 DOMPurifyはあなたにそれを助けるライブラリです：https://github.com/cure53/DOMPurify。