ReactでHTML文字列を描画するdangerouslySetInnerHTML

ショートカット

Reactで文字列のHTMLを描画する

Reactで文字列のHTMLを描画するのは、そのままではできません。これをやる場合、dangerouslySetInnerHTMLという属性を使うことになります。

使用する機会はあまりないと思いますが、例えばDBにHTMLを文字列で持っていて、APIから返されたHTML文字列を表示したいと言った場合でしょうか。ちなみに、dangerouslyとあからさまに付いているのは、基本使うべきではないからです。（クロスサイトスクリプティングの危険があるかららしい）

ですので、ほとんど使う機会はないと思いますが、仕様によってはやむおえない場合もあります。

使う場合は下記のように、JSXのタグに指定して__htmlにHTML文字列を渡します。

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

これだけでHTMLを描画してくれます。使い方は簡単ですね。