React の Component が持つ ref
属性はコールバック関数を受け取れます。
コールバック関数は引数としてComponent 自身 の DOM要素が渡り、マウント時に実行されます。
したがって、以下のようにして Component (が render されてできる DOM要素)の子要素に HTMLElement を追加できます。
<ReactComponent ref={ref => ref?.appendChild(_HTMLElement)} />
ライブラリが HTMLElement を返す場合、React Component との接点として、以下のコンポーネントを用意します。
const ReactHTMLElement: React.FC = ({children}) => {
return (
<div ref={ref => ref?.appendChild(children)} />
)
}
JSX の自然な構造として、React Component に HTMLElement を流し込むことができます。
<ReactHTMLElement>
{_HTMLElement}
</ReactHTMLElement>