React でのモーダルとツールチップの作成は、多くの場合複雑でスタイル設定が難しく、多くのスタイル設定エラーにつながります。
createPortal API はこのプロセスを簡素化し、メイン DOM の外側でコンポーネントをレンダリングできるようにし、その結果、スタイル設定と保守が容易になります。この投稿では、このツールを使用して React でモーダルとツールチップを正しい方法で作成する方法を学びます。

createPortal API について

createPortal は、DOM のさまざまな部分でコンポーネントをレンダリングできるようにする React 組み込み関数です。また、モーダルとオーバーレイ、サードパーティのコンポーネント、カスタム UI 要素の構築に特に役立ちます。

仕組み

ポータルはコンポーネントの return ステートメント内で使用され、DOM ノードの物理的な配置のみを変更します。これは、DOM ノードをメイン DOM ツリーの外にテレポートするようなものです。 createPortal API は 2 つのパラメータと 3 番目のオプションのパラメータにアクセスします:

• Children: React でレンダリングできるもの、div、コンポーネント、または React フラグメント。
• domNode: 配置される子の場所です。
• key (オプション): ポータル キーとして使用される一意の番号または文字列。

コンポーネント A でポータルを作成し、コンポーネント B でレンダリングすると仮定すると、ポータルの子はコンポーネント A のすべての状態と変数にアクセスし、コンポーネントでレンダリングされている間、コンポーネント A でそのまま機能します。 B.

ポータルの作成と使用

以下の例では、状態を受け入れる子コンポーネントをテレポートし、このコンポーネントを本体に移動するためにポータルが使用されています。

import { createPortal } from 'react-dom'

const App = () => {
  const [state, setState] = useState()

  return(
    

      
 ... 
      createPoratl(
        ,
        document.body
      )
    
  )
}

export default App

これで、子コンポーネントが HTML の body タグ内にレンダリングされます。

結論

createPortal は、メイン DOM ツリーの外側でレンダリングする必要があるモーダル、ツールチップ、その他のコンポーネントを作成するための React の貴重なツールです。このツールを使用すると、これらの要素に対して、よりクリーンで、より柔軟で、より効率的なアプローチを実現できます。