useRefのappendChildでエラーが出る

Question

ReactのuseRefでappendChildができません

const testRef = useRef<HTMLDivElement>();
const input = document.createElement("input");

return <div ref={testRef}></div>

これだとエラーは出ないのですが、

document.body.appendChild(input)

これだとエラーが出ます。

testRef.current.appendChild(input)

何かuseRefで定義した要素に別の要素を追加する方法はありませんか？

Comments

[maisumakun]

> これだとエラーが出ます。

どこにそのコードを書き足して、どのようなエラーが出たのですか？

Answer 1

何かuseRefで定義した要素に別の要素を追加する方法はありませんか？

refがReact管轄のエレメントを指すのであれば、その中身をDOMなどReact外の方法で書き換えることは、基本的にやるべきではありません。Reactの枠内からエレメントを追加してください。