React ポータル機能コンポーネント

親コンポーネントの DOM 階層の外側にある DOM ノード に子をレンダリングする第一級の方法は、ポータルによって提供されます。 この記事では、ReactJS のポータル機能コンポーネントの使用方法を学びます。

ReactJS の React ポータル機能コンポーネント

基本的に、ルート要素の上に App 要素をマウントします。 主要な DOM 要素として id root を持つ div 要素を使用することは、実質的に標準的な方法になっています。

アプリケーションのすべての React コンポーネントは、ブラウザーのDOM ツリーを見ると文の中にあるroot要素の下にあります。 それにもかかわらず、React Portals を使用すると、この DOM ツリー を離れて、この root 要素の下にない DOM ノード にコンポーネントをレンダリングできます。

これを行うと、親子 階層に違反し、コンポーネントを新しい要素として提示する必要があります。

構文：

ReactDOM.createPortal(child, container)

1. 最初の引数は child で、要素、文字列、フラグメント (子) など、レンダリング可能なものであれば何でもかまいません。
2. container は DOM 要素であり、2 番目の引数です。

子 コンポーネントは、親コンテナーを視覚的に終了する必要があります。 以下に示すのは、Portal の最も頻繁な使用例の 1つです。

1. モーダル付きのダイアログ ボックス
2. ホバーカード
3. フローティングメニュー
4. ツールチップ
5. ローダー

React ポータルを使用する場合は、次の点に注意してください。 誰かと知り合いにならない限り、これらの傾向はすぐにはわかりません。

1. ポータル ノード が DOM のどこにあるかに関係なく、イベント バブリングは、イベントを React ツリーの先行ノードに伝達することによって、意図したとおりに機能します。
2. ポータルを介して子要素をレンダリングする場合、React は引き続き子要素のライフサイクルを制御します。
3. React コンポーネント ツリーは、HTML DOM 構造のみを変更する portal の影響を受けません。
4. ポータルを使用する場合、ポータル コンポーネントのマウント ポイントとして HTML DOM 要素 を指定する必要があります。

次の例を使用して、前述のアイデアを理解してみましょう。

コード：

const PortalModal = ({message, isModalOpen, onClose}) => {
  if (!isModalOpen) return null;
  return ReactDOM.createPortal(
     <div className='modal'>
      <p>{message}</p>
      <button onClick={onClose}>X</button>
     </div>
    ,document.body);
  }
function Component() {
  const [modalOpen, setModalOpen] = useState(false)
  return (
    <div>
      <button onClick={() => setModalOpen(true)}>Open Modal</button>
      <PortalModal
  message = 'Hello DelftStack Readers!'
       isModalOpen={modalOpen}
       onClose={
    () => setModalOpen(false)}
      />
    </div>
  )
}

上記の例では、モーダルのポータルを作成しました。 ユーザーがボタンをクリックするとすぐに、モーダルが開き、root 要素の外側に表示されます。

このモーダルのディメンションは、ルート階層の外でレンダリングされるため、親コンポーネントによって継承または変更されません。

出力：

デモを実行