Draft.js und stateToHTML, wie Ausgabe HTML in react Komponente rendern?

Question

Ich habe meine Entwurf js-Editor funktioniert gut, es speichert in meiner Datenbank mit convertToRaw(editorState1.getCurrentContent()), und ich bekomme es zurück und konvertiert es in HTML mit draft-js-export-html und stateToHTML(convertFromRaw(dbContent.content.text01)).

So weit so gut ... aber jetzt habe ich Raw HTML, die ich in meiner Komponente reagieren möchte, und hier kommt das Problem.

Nur Rendern mit {props.text01} gibt es als Zeichenfolge aus und wird als Text in <p>adfasfadfs</p>.

Offensichtlich möchte ich es als HTML rendern. Wie mache ich das?

Ich habe mir dangerousSetInnerHTML angesehen, aber ich hätte lieber kein ANDERES Plugin, nur um meinen Entwurf js so zu arbeiten, wie ich es will.

Bin ich es falsch oder ist dangerousSetInnerHTML die einzige Möglichkeit, es zu tun?

Answer 1

Wie in this answer beschrieben, entweicht durch Standard Reagieren HTML (das ist, warum es nur als String gerendert). Sie können das Rendern jedoch mithilfe der dangerousSetInnerHTML-Eigenschaft erzwingen. Sie müssen nur mögliche XSS-Angriffe in Betracht ziehen.

Wenn Draft bereits installiert ist, können Sie den Inhalt einfach mit readOnly prop im DraftEditor rendern.

Answer 2

Sie können dieses npm Modul verwenden. Verbindung ist link NPM installieren --save HTML-zu-reagiert

Beispiele

Einfache Das folgende Beispiel parst jeden Knoten und seine Attribute und gibt einen Baum von Elementen React.

var ReactDOMServer = require('react-dom/server'); 
 
var HtmlToReactParser = require('html-to-react').Parser; 
 

 
var htmlInput = '<div><h1>Title</h1><p>A paragraph</p></div>'; 
 
var htmlToReactParser = new HtmlToReactParser(); 
 
var reactElement = htmlToReactParser.parse(htmlInput); 
 
var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement); 
 

 
assert.equal(reactHtml, htmlInput); // true