React でのモーダルとツールチップの作成は、多くの場合複雑でスタイル設定が難しく、多くのスタイル設定エラーにつながります。
createPortal API はこのプロセスを簡素化し、メイン DOM の外側でコンポーネントをレンダリングできるようにし、その結果、スタイル設定と保守が容易になります。この投稿では、このツールを使用して React でモーダルとツールチップを正しい方法で作成する方法を学びます。
createPortal は、DOM のさまざまな部分でコンポーネントをレンダリングできるようにする React 組み込み関数です。また、モーダルとオーバーレイ、サードパーティのコンポーネント、カスタム UI 要素の構築に特に役立ちます。
ポータルはコンポーネントの return ステートメント内で使用され、DOM ノードの物理的な配置のみを変更します。これは、DOM ノードをメイン DOM ツリーの外にテレポートするようなものです。 createPortal API は 2 つのパラメータと 3 番目のオプションのパラメータにアクセスします:
コンポーネント A でポータルを作成し、コンポーネント B でレンダリングすると仮定すると、ポータルの子はコンポーネント A のすべての状態と変数にアクセスし、コンポーネントでレンダリングされている間、コンポーネント A でそのまま機能します。 B.
以下の例では、状態を受け入れる子コンポーネントをテレポートし、このコンポーネントを本体に移動するためにポータルが使用されています。
import { createPortal } from 'react-dom' const App = () => { const [state, setState] = useState() return() } export default App...
createPoratl(, document.body )
これで、子コンポーネントが HTML の body タグ内にレンダリングされます。
createPortal は、メイン DOM ツリーの外側でレンダリングする必要があるモーダル、ツールチップ、その他のコンポーネントを作成するための React の貴重なツールです。このツールを使用すると、これらの要素に対して、よりクリーンで、より柔軟で、より効率的なアプローチを実現できます。
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。
Copyright© 2022 湘ICP备2022001581号-3