Reagieren Renderausgabe von "Markiert" als Text

Question

Ich verwende die Marked Bibliothek mit React. Das Problem, das ich habe, ist, dass die Ausgabe von Marked als Text gerendert wird, wenn es richtige HTML-Elemente enthält. Hier ist das Problem Code:

class Main extends React.Component{ 
render() { 
console.log(this) 
console.log(marked('I am using __markdown__.')); 
return (
    <div className="container"> 
    <div className="row"> 
     <div className="col-md-6"> 
     {marked('I am using __markdown__.')} 
     </div> 
     <div className="col-md-6"> 
     <h1>Oh hello</h1> 
     </div> 
    </div> 
    </div> 
) 
} 
}; 

React.render(<Main />, document.getElementById('app')); 

und die html:

<div id="app"></div> 

Dank.

Answer 1

Verwenden Sie dangerouslySetInnerHTML. React verhindert, dass du von xss kommst, und dies ist die Escape-Luke.

<div 
    className="col-md-6" 
    dangerouslySetInnerHTML={{ 
     __html: marked('I am using __markdown__.') 
    }} 
/>