Anzeige Datenblöcke von draftjs

Question

Wie kann ich in meiner reagieren Komponente, roh, dass ich zu Mongodb speichern, von draftjs Editor?

Dies ist, was ich in meiner Datenbank haben:

"blocks" : [ 
      { 
       "key" : "7abte", 
       "text" : "example", 
       "type" : "unstyled", 
       "depth" : 0, 
       "inlineStyleRanges" : [ 
        { 
         "offset" : 0, 
         "length" : 20, 
         "style" : "BOLD" 
        } 
       ], 
       "entityRanges" : [] 
      } 
     ] 

ich herausgefunden habe, wie dies zu Editor zurückzukehren (Daten zu bearbeiten), alles super funktioniert. Aber ich kann es nicht auf der Vorderseite anzeigen.

Ich habe auch versucht zu semantischen HTML mein Editor Inhalt Export und das ist, was ich erhielt:

aber wie Sie sehen, ich weiß nicht, wie es angezeigt werden, nicht als String, sondern als html. .

Haben Sie eine gute Lösung für mein Problem?

Answer 1

Wenn Sie den HTML-Code zu verarbeiten, müssen in Front-End zu zeigen, sollten Sie etwas wie folgt verwenden:

<div dangerouslySetInnerHTML={{__html: YourMarkupVar}} /> 

Else, Reaktion als Sicherheitsmaßnahme, werden die Tags und die Anzeige als normaler Text kodieren.