「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > React createPortal を使用してモーダル、ツールチップなどをマスターする

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

2024 年 11 月 1 日に公開
ブラウズ:482

Master Modal, Tooltips and more with React createPortal

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 の貴重なツールです。このツールを使用すると、これらの要素に対して、よりクリーンで、より柔軟で、より効率的なアプローチを実現できます。

リリースステートメント この記事は次の場所に転載されています: https://dev.to/kada/master-modal-tooltips-and-more-with-react-createportal-2h9o?1 侵害がある場合は、[email protected] に連絡して削除してください。それ
最新のチュートリアル もっと>
  • ## PHP のメモリ使用量を効果的にプロファイリングする方法: Xdebug の代替案とベスト プラクティス
    ## PHP のメモリ使用量を効果的にプロファイリングする方法: Xdebug の代替案とベスト プラクティス
    PHP メモリ消費の分析PHP ページのメモリ使用量を精査する方法を探しています。具体的には、データのメモリ割り当てを決定し、大量のメモリ消費の原因となっている関数呼び出しを特定することを目的としています。Xdebug の制限事項Xdebug は、次のようなトレース機能を提供します。はメモリ デルタ...
    プログラミング 2024 年 11 月 7 日に公開
  • 仮想 DOM でコンポーネントがレンダリングされる方法と再レンダリングを最適化する方法
    仮想 DOM でコンポーネントがレンダリングされる方法と再レンダリングを最適化する方法
    最新の Web アプリケーションを構築する場合、アプリの高速性と応答性を維持するには、UI (ユーザー インターフェイス) を効率的に更新することが不可欠です。多くのフレームワーク (React など) で使用される一般的な戦略は、仮想 DOM と コンポーネント を使用することです。この記事では、...
    プログラミング 2024 年 11 月 7 日に公開
  • CRUD オペレーション: それは何ですか? どのように使用できますか?
    CRUD オペレーション: それは何ですか? どのように使用できますか?
    CRUD オペレーション: それは何ですか? どのように使用できますか? CRUD 操作 (作成、読み取り、更新、削除) は、データ管理を必要とするアプリケーションの基本です。これらの操作はデータベースと効果的に対話するために必要な基本機能を提供するため、開発者にとってこれらの操作...
    プログラミング 2024 年 11 月 7 日に公開
  • 無料の Java ユーティリティ パッケージの紹介
    無料の Java ユーティリティ パッケージの紹介
    Java バックエンド開発者向けの高速で使いやすいプログラミング ツールキット 管理者および開発者としての職業生活の中で、私は数え切れないほどのフリーウェアやオープンソース製品から何度も恩恵を受けてきました。したがって、私もこのコミュニティに貢献するのは自然なことです。 この Java クラスのコレ...
    プログラミング 2024 年 11 月 7 日に公開
  • 入れ子になった配列の PHP Foreach ループで配列キーを取得する方法
    入れ子になった配列の PHP Foreach ループで配列キーを取得する方法
    PHP: Foreach ループでの配列キーの取得PHP では、foreach ループを使用して連想配列を反復処理すると、両方の値にアクセスできます。そして鍵。ただし、key() 関数は現在の値のキーのみを返すため、ネストされた配列を操作する場合には不十分な場合があります。たとえば、次のような配列を...
    プログラミング 2024 年 11 月 7 日に公開
  • MySQL テーブルで Latin1 文字を UTF-8 に変換するにはどうすればよいですか?
    MySQL テーブルで Latin1 文字を UTF-8 に変換するにはどうすればよいですか?
    UTF8 テーブルの Latin1 文字を UTF8 に変換適切な処理を保証するために必要な mysql_set_charset 関数が PHP スクリプトに欠けていることがわかりました。 UTF-8 文字の。この修正を実装したにもかかわらず、UTF8 テーブルに格納されている Latin1 文字を...
    プログラミング 2024 年 11 月 7 日に公開
  • Zapcap API (字幕用 API) の使用方法
    Zapcap API (字幕用 API) の使用方法
    自動ビデオ処理用の ZapCap の API を既存のシステムに統合することは、複雑さを最小限に抑え、効率を最大限に高めるように設計された簡単なプロセスです。 ZapCap は、シームレスなオンボーディングを確保するために、開発者向けの API ドキュメントを提供します。 ステップバ...
    プログラミング 2024 年 11 月 7 日に公開
  • ブートストラップ コンポーネントを探索する
    ブートストラップ コンポーネントを探索する
    Bootstrap 5 は、最も人気のあるフロントエンド フレームワークの 1 つであり、開発者が応答性が高く視覚的に魅力的な Web サイトを迅速に構築するのに役立つ、さまざまな便利なコンポーネントとユーティリティを提供します。 カード カードは、Bootstrap 5 の多用途...
    プログラミング 2024 年 11 月 7 日に公開
  • SVG 管理の簡素化: パスを定数の単一の JS ファイルに変換
    SVG 管理の簡素化: パスを定数の単一の JS ファイルに変換
    React.js アプリケーションを構築する場合、SVG アイコンを効率的に管理することが重要です。 SVG はレスポンシブ デザインに必要なスケーラビリティと柔軟性を提供しますが、大規模なプロジェクトでの取り扱いは煩雑になる可能性があります。そこで svg-path-constants が登場しま...
    プログラミング 2024 年 11 月 7 日に公開
  • JavaScript コード構造を管理する方法
    JavaScript コード構造を管理する方法
    良い!クリーンで整理された JavaScript コードベースを維持することは、プロジェクトを長期的に成功させるために不可欠です。適切に構造化されたコードベースにより、可読性が向上し、技術的負債が軽減され、デバッグとスケーリングが容易になります。小規模なプロジェクトに取り組んでいる場合でも、大規模な...
    プログラミング 2024 年 11 月 7 日に公開
  • オーバーフローを左に流れるように構成できますか?
    オーバーフローを左に流れるように構成できますか?
    オーバーフローは左に流れるように設定できますか?オーバーフローは通常、コンテンツを強制的に右に流すことで処理され、左端のコンテンツが切り取られます。ただし、特定の CSS スタイルを適用することで、この動作を元に戻すことができます。解決策左側へのオーバーフローを有効にするには、次の手順に従います:オ...
    プログラミング 2024 年 11 月 7 日に公開
  • データ型を維持しながら NumPy 配列を異なるデータ型と組み合わせるには?
    データ型を維持しながら NumPy 配列を異なるデータ型と組み合わせるには?
    NumPy で複数のデータ型を持つ配列を結合する異なるデータ型を含む配列を、各列の対応するデータ型を持つ 1 つの配列に連結したいという要望が考えられます。挑戦です。 np.concatenate() を使用する一般的なアプローチでは、残念ながら配列全体が文字列データ型に変換され、メモリ効率が低下し...
    プログラミング 2024 年 11 月 7 日に公開
  • インラインブロックを同じ行に水平に配置するにはどうすればよいですか?
    インラインブロックを同じ行に水平に配置するにはどうすればよいですか?
    同じ行でインライン ブロックを水平に整列する問題インライン ブロックには、ベースラインの整列や自動センタリングなど、フローティング要素に比べて利点があります。視野が狭くなったとき。ただし、2 つのインライン ブロックを同じ線上で水平に整列させると、問題が発生する可能性があります。インライン ブロック...
    プログラミング 2024 年 11 月 7 日に公開
  • やる気をなくす
    やる気をなくす
    初心者のように感じて、数回やめました。 初めてコーディングについて考え始めたのは子供の頃でしたが、むしろ社交的な人間になることを選択し、現在 26 歳になり、Python、JS、React、DB などのコーディングを何度も学ぼうとしました。もっといろいろありましたが、最後には圧倒さ...
    プログラミング 2024 年 11 月 7 日に公開

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3