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> ) }
スクリプトが動いて良い時だけこういう実装にしよう。