React.jsのdangerouslySetInnerHTMLは内部実装がinnerHTMLなので、scriptタグのスクリプトは評価されない。

Reactプロジェクトでユーザーが定義した任意のhtml要素を描画したいとき、dangerouslySetInnerHTMLを使ったりすると思うのだけれど、これを使ってもscriptタグ内のスクリプトは実行されない。

それはdangerouslySetInnerHTMLが依存するElement.innerHTMLがそういう仕様になっているから。

一旦ContextualFragmentを作って、から対象要素に挿入するとちゃんとスクリプトが動く。

function InnerHTML({ html: string })) {
  const ref = useRef(null)

  useEffect(() => {
    const fragment = document.createRange().createContextualFragment(html)
    ref.current.appendChild(fragment)
  }, [])


  return (
    <div ref={ref}></div>
  )
}

スクリプトが動いて良い時だけこういう実装にしよう。

参考資料