Reactで文字列のHTMLを描画する
Reactで文字列のHTMLを描画するのは、そのままではできません。これをやる場合、dangerouslySetInnerHTMLという属性を使うことになります。
使用する機会はあまりないと思いますが、例えばDBにHTMLを文字列で持っていて、APIから返されたHTML文字列を表示したいと言った場合でしょうか。ちなみに、dangerouslyとあからさまに付いているのは、基本使うべきではないからです。(クロスサイトスクリプティングの危険があるかららしい)
ですので、ほとんど使う機会はないと思いますが、仕様によってはやむおえない場合もあります。
dangerouslySetInnerHTMLの書き方
使う場合は下記のように、JSXのタグに指定して__htmlにHTML文字列を渡します。
<div dangerouslySetInnerHTML={{__html: htmlString}}/>
これだけでHTMLを描画してくれます。使い方は簡単ですね。
コメント