React createPortal を使用してモーダル、ツールチップなどをマスターする

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

createPortal API について

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

仕組み

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

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

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

ポータルの作成と使用

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

import { createPortal } from 'react-dom'

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

  return(
    <div>
      <p> ... </p>
      createPoratl(
        <Child state={state} />,
        document.body
      )
    </div>
  )
}

export default App

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

結論

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

以上がReact createPortal を使用してモーダル、ツールチップなどをマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。