Reactガイドを読んでいくその183

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

DOM 要素

属性についての差異

dangerouslySetInnerHTML

innerHTMLの代替にあたる。
基本的にHTMLをコードに設定することはXSSの対象になりやすいので避けるべき。
ReactではdangerouslySetInnerHTMLとして定義することでHTMLを設定できるが危険であることを認識させるようにしている。
discodeで外部リンクに飛ぶときアラートが出るのと似てますね。
使うときは下記のような__html というキーを持ったオブジェクトを渡す必要がある。

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

今日はここまで。