「Marked」からの出力をテキストとして返す

Question

ReactでMarkedライブラリを使用しています。私が抱えている問題は、適切なHTML要素が含まれていれば、Markedの出力がテキストとして出力されることです。ここでは、問題のコードは次のとおりです。

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')); 

とhtml：

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

感謝。

Answer 1

dangerouslySetInnerHTMLを使用してください。 Reactはあなたをxssから守り、これはエスケープハッチです。

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