2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React Component に HTMLElement を流し込む

Posted at

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>
2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?