[React]react-modalのparent要素を指定したい。

背景

nextjsでモーダルの実装にreact-modalを用いた。
https://github.com/reactjs/react-modal

このライブラリではモーダルはデフォルトでdomのルートに配置されてしまう。
相対的な位置に置く際には待ったのでまとめる。

modal.tsx

<div>
  <ReactModal {...props} />
</div>

domの表示

<div>
</div>
<ReactModal ... />

やりかた

parentSelectorを指定すれば良い
https://reactcommunity.org/react-modal/#custom-parent

const Modal = ({ id }) => (
  <div>
    <ReactModal {...props} parentSelector={() => document.getElementById('id')} />
  </div>
)

はまったとこ

1. 親要素からrefを渡し、react-modalにref.currentを渡すとエラーになる。
   ref.currentが最初のレンダリングタイミングではnullになっており、appendChildができないため。
2. また、親要素でMath.random()で作ったidを渡した時もうまくいかなかった。

いずれにせよ、strictモードによるcomponentの描画が2度行われるため意図した挙動にはならなかった。
https://ja.reactjs.org/docs/strict-mode.html