ReactでのHTML描画について

Reactで文字列のHTMLを文字列として描画するのではなく、HTMLで描画する。

方法

dangerouslySetInnerHTML を使う。

<span dangerouslySetInnerHTML={{__html: htmlString}}>

の様な形で、htmlString にはHTMLが文字列で代入されています。
こうすることで、 htmlString の値を文字列としてではなく、HTMLとして表示することができます。

MarkdownをHTMLの文字列に変換し、文字列ではなくHTMLとして描画する。
markedなどは、Markdownを変換して文字列を出力するので、今回の様な処理が必要になります。

github.com

参考

mikazuki.hatenablog.jp