React でコンポーネントを作成すると、通常はコンポーネント ツリー内に存在します。これはほとんど問題ありませんが、コンポーネントの特定の部分を に表示したり、まったく別の場所に表示したい場合があります。 コンポーネント ツリーの外 これは、他のすべてのコンポーネントの上にある必要があるモーダル ポップアップ ウィンドウを作成するときの一般的な要件です。 これらをコンポーネント内に作成することもできますが、最終的には他の何よりも優先する必要があり、多くのコンポーネント内にネストすると、 がそれらが含まれているものを下回るため、問題が発生する可能性があります。 z-index この問題を解決するために、 を使用してモーダルを独自のコンポーネントからテンプレートの別の部分に できます。 createPortal テレポート これにより、HTML ツリーのベース、 タグ内、または別の要素内など、必要な場所にコンポーネントを配置できます。 body 要素はコンポーネント ツリー内に存在しますが、 を使用すると、好きな場所に配置できます。 createPortal React ポータルの使用 ポータルがどのように機能するかを示すために、 ファイル内に次の基本的な React コードがあると考えてください。ここでは、モーダルが他のすべての上に表示されるようにします。そのため、 という を作成しました。これは最終的に、すべてのモーダルを入れたい場所です。 App.js #modal-container div import logo from './logo.svg'; import './App.css'; import { useState } from 'react' import Modal from './components/Modal.js'; function App() { const [isModalOpen, setIsModalOpen] = useState(false); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <button onClick={() => setIsModalOpen(!isModalOpen)}> Click to Open Modal </button> <Modal modalState={isModalOpen} onClickEvent={() => setIsModalOpen(!isModalOpen)}> This is Modal Content! </Modal> </header> <div id="modal-container"></div> </div> ); } export default App; 内に、 というコンポーネントをインポートしました。これは Modal コンポーネントで、ユーザーがボタンをクリックするたびにポップアップします。 App.js Modal を使用して を true に設定すると、モーダルが表示されます。そうしないと消えてしまいます。 setIsModalOpen() isModalOpen また、モーダルが実際に他のすべての上に表示されるようにするための CSS も少しあります。 #modal-container { position: absolute; top: 0; left: 0; width: 100%; z-index: 9999; height: 100%; pointer-events: none; } .modal { position: absolute; top: 200px; background: white; border-radius: 4px; left: calc(50% - 100px); width: 200px; } {ortal の作成 ポータルの作成は非常に簡単です。 という関数が 1 つあります。 React で何らかの DOM を返す代わりに、 を返します。 createPortal() Portal は 2 つの引数 - 返したい DOM 要素 - この場合はモーダル - と DOM 要素をテレポートしたい DOM 要素を受け入れます。 createPortal() したがって、すべてのモーダルを に入れたいので、2 番目の引数は です。 #modal-container document.getElementById('modal-container') import { createPortal } from 'react-dom'; function Modal({modalState, onClickEvent}) { if(!modalState) return null; return ( createPortal( <div className="modal"> <button onClick={onClickEvent}>Close Modal</button> <div className="modal-content">Modal Content goes here</div> </div>, document.getElementById('modal-container') ) ); }; export default Modal; DOM 要素を にテレポートしましたが、それでも通常の React の子のように動作します。ポータルは引き続き React ツリーに存在するため、要素が存在するコンテキストなどの機能は引き続き同じように機能します。 modal-container 同じファイルに と がありますが、DOM 要素をテレポートする場所は React コードの にでもあることに注意してください。 modal-container Modal どこ したがって、DOM 内の任意の場所にある完全に異なるサブコンポーネント、要素、または親にテレポートできます。これは非常に強力で便利です。慎重に使用してください。 HTML をもう一度見てみましょう。 App.js <!-- .... --> <button onClick={() => setIsModalOpen(!isModalOpen)}> Click to Open Modal </button> <Modal modalState={isModalOpen} onClickEvent={() => setIsModalOpen(!isModalOpen)}> This is Modal Content! </Modal> </header> <div id="modal-container"></div> これで、 はヘッダーに配置されますが、ボタンを使用してモーダルを開くたびに に表示されます。 Modal #modal-container 結論 ポータルは React の非常に強力なツールです。これらは、コンポーネントベースのシステムの主な問題を解決するための便利な方法です。特定の要素を他の要素よりも優先して転送します。 そのため、この React ポータルのガイドを楽しんでいただけたでしょうか。 React を学習している場合は、最初に Javascript をマスターすることをお勧めします。これは、完全な で行うことができます。 Javascript ハンドブック すてきな一日を。
