dangerouslySetInnerHTML

Reactは仮想DOMなので、実際のDOMをrenderingする際は、escapeされる

dangerouslySetInnerHTMLは、escapeせずにそのままHTMLを表示する

例えば中に<button>..</button>が含まれていればbuttonが表示される

<button onclick"alert('hoge')">Click here!!!</button>のように書けば、JSも実行できる

使用する場合もDOMPurifyなどのlibraryを使ってescapeすべき

code:ts

import dompurify from 'dompurify';

const sanitize = dompurify.sanitize;

...

<div

dangerouslySetInnerHTML={{

__html: sanitize(text)

}}