ReactJS und XML

Question

Ich versuche, einen RSS Reader mit React zu machen. Ich habe einige RSS-Feeds (http://www.economist.com/sections/economics/rss.xml), die Elemente in einem CDATA-Abschnitt enthalten und HTML-Markup enthalten. Was ist der "React" Weg damit umzugehen?

Mein Verständnis ist, dass normalerweise, wenn Sie regelmäßig verwenden Javascript/jquery ein XML-Dokument zu analysieren, dass Sie würde nur die Daten erhalten und direkt an das HTML-Dokument schreiben, so etwas wie

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

Aber da Reagieren verwendet ein virtuelles DOM, das nicht möglich ist. Wenn Sie versuchen, zu tun

import React from 'react' 

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

export default Component 

würde den Abschnitt als eine Zeichenfolge voller HTML-Tags anzeigen.

Ich fragte mich, ob es einen richtigen oder bevorzugten Weg gab, damit umzugehen. Ich bin mir bewusst, gefährlich gesetztInnerHTML, aber würde es vorziehen, wenn möglich zu vermeiden, da React Menschen davon abhält, es zu benutzen. Momentan bin ich mit DomParser beschäftigt und versuche, bestimmte Tags aus der CDATA-Zeichenfolge zu extrahieren, und ich muss mich fragen, ob es etwas Besseres gibt, das ich einfach nicht über Google gefunden und die Dokumentation gelesen habe.

Answer 1

dangerouslySetInnerHTML ist die richtige Sache hier zu verwenden. Der Name ist wirklich als Erinnerung daran gedacht, vorsichtig zu sein, anstatt abschreckend zu sein, ihn jemals zu benutzen. Da die docs Reagieren sagen (https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml):

Im Allgemeinen von HTML-Code Einstellung riskant ist, weil es einfach ist, versehentlich Ihre Nutzer auf einen Cross-Site-Scripting (XSS) Angriff aussetzen. Sie können also HTML direkt aus React setzen, aber Sie müssen gefährlichSetInnerHTML eingeben und ein Objekt mit einem __html-Schlüssel übergeben, um sich daran zu erinnern, dass es gefährlich ist.

Sie müssen also vorsichtig sein und vor XSS-Angriffen schützen. Dies beinhaltet die Bereinigung aller HTML-Dateien, die an dangerouslySetInnerHtml übergeben werden. Dies ist besonders wichtig für Ihren Anwendungsfall, da Sie keine Kontrolle über den HTML-Code haben, den Sie gerade verwenden. DOMPurify ist eine Bibliothek, die Ihnen dabei helfen kann: https://github.com/cure53/DOMPurify.