これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
DOM 要素
属性についての差異
dangerouslySetInnerHTML
innerHTMLの代替にあたる。
基本的にHTMLをコードに設定することはXSSの対象になりやすいので避けるべき。
ReactではdangerouslySetInnerHTMLとして定義することでHTMLを設定できるが危険であることを認識させるようにしている。
discodeで外部リンクに飛ぶときアラートが出るのと似てますね。
使うときは下記のような__html というキーを持ったオブジェクトを渡す必要がある。
function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return <div dangerouslySetInnerHTML={createMarkup()} />; }
今日はここまで。