React は、ポータルの再利用可能なコンポーネントのサンプル コードをカプセル化します。
React のコアの 1 つはコンポーネントです。この記事では、React チュートリアルでポータルの再利用可能なコンポーネントのカプセル化に関する関連情報を主に紹介します。必要な方は以下を参照してください。一緒に学びましょう。
ポータルの紹介
したがって、次のことを行うユニバーサルコンポーネントが必要です:
はコンポーネント内で宣言的に書くことができます
は宣言された場所を実際にはレンダリングしません
-
遷移アニメーションをサポートします
そして、モーダル、ツールチップ、通知などのコンポーネントは、このコンポーネントに基づいて作成できます。このコンポーネントをポータルと呼びます。
React16+ を使用している場合は、少なくとも Portal について知っているか、Portal の使用に習熟している必要があります。
ポータルは、ルート要素の外側に DOM を作成できます。
1. 通常、Web サイトにはルートが 1 つしかありません
<body> <p id="root"></p> </body>
2. Portal を使用すると、次のようになります
<body> <p id="root"></p> <p id="portal"></p> </body>
Portal の高レベルコンポーネントのカプセル化
Portal のデモは、公式 Web サイトで見ることができます。実現するのは、それを再利用可能なコンポーネントにカプセル化することです。
目標
本文の下にHTMLを手動で追加する必要はなく、コンポーネントを通じて自分で作成します。
<CreatePortal id, //可以传入id className, //可以传入className style //可以传入style > 此处插入p或者react组件 </CreatePortal>
実装計画
1. Portalコンポーネントを返すcreatePortal関数を作成します
function createPortal() {
}
export default createPortal()2. render関数を実装し、createPortalを使用してポータルを作成します。
import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
function createPortal() {
class Portal extends React.Component{
}
return Portal
}
export default createPortal()4.componentDidMount関数の実装、ボディにdomを追加
render() {
return ReactDOM.createPortal(
this.props.children,
this.el
)
}5.componentWillUnmount関数の実装、DOM構造をクリア
componentDidMount() {
document.body.appendChild(this.el);
}6.コードを完成させる
componentWillUnmount() {
document.body.removeChild(this.el)
}概要
createPortal と Provide の実装アイデアは似ており、関数型プログラミングのアイデアを使用して目標を達成します。これが便利だと思うなら、ぜひ使ってください。
関連する推奨事項:
Oracle Portalとそのポータル開発の概要Liferay学習メモ(1) Liferay Portal5.2.3環境の事前構築
Oracle Fusion Middleware Ⅱ: Weblogic、UCM、WebCenter Portal
以上がReact は、ポータルの再利用可能なコンポーネントのサンプル コードをカプセル化します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1667
14
1426
52
1328
25
1273
29
1255
24
React と RabbitMQ を使用して信頼性の高いメッセージング アプリを構築する方法
Sep 28, 2023 pm 08:24 PM
React と RabbitMQ を使用して信頼性の高いメッセージング アプリケーションを構築する方法 はじめに: 最新のアプリケーションは、リアルタイム更新やデータ同期などの機能を実現するために、信頼性の高いメッセージングをサポートする必要があります。 React はユーザー インターフェイスを構築するための人気のある JavaScript ライブラリであり、RabbitMQ は信頼性の高いメッセージング ミドルウェアです。この記事では、React と RabbitMQ を組み合わせて信頼性の高いメッセージング アプリケーションを構築する方法を紹介し、具体的なコード例を示します。 RabbitMQ の概要:
React Router ユーザーガイド: フロントエンドルーティング制御の実装方法
Sep 29, 2023 pm 05:45 PM
ReactRouter ユーザーガイド: フロントエンドルーティング制御の実装方法 シングルページアプリケーションの人気に伴い、フロントエンドルーティングは無視できない重要な部分になりました。 React エコシステムで最も人気のあるルーティング ライブラリとして、ReactRouter は豊富な機能と使いやすい API を提供し、フロントエンド ルーティングの実装を非常にシンプルかつ柔軟にします。この記事では、ReactRouter の使用方法と具体的なコード例を紹介します。 ReactRouter を最初にインストールするには、次のものが必要です
PHP、Vue、React: 最適なフロントエンド フレームワークを選択するには?
Mar 15, 2024 pm 05:48 PM
PHP、Vue、React: 最適なフロントエンド フレームワークを選択するには?インターネット技術の継続的な発展に伴い、フロントエンド フレームワークは Web 開発において重要な役割を果たしています。 PHP、Vue、React は 3 つの代表的なフロントエンド フレームワークであり、それぞれに独自の特徴と利点があります。使用するフロントエンド フレームワークを選択するとき、開発者はプロジェクトのニーズ、チームのスキル、個人の好みに基づいて情報に基づいた決定を下す必要があります。この記事では、PHP、Vue、React の 3 つのフロントエンド フレームワークの特徴と用途を比較します。
Java フレームワークとフロントエンド React フレームワークの統合
Jun 01, 2024 pm 03:16 PM
Java フレームワークと React フレームワークの統合: 手順: バックエンド Java フレームワークをセットアップします。プロジェクト構造を作成します。ビルドツールを設定します。 React アプリケーションを作成します。 REST API エンドポイントを作成します。通信メカニズムを構成します。実際のケース (SpringBoot+React): Java コード: RESTfulAPI コントローラーを定義します。 React コード: API によって返されたデータを取得して表示します。
React を使用して応答性の高いバックエンド管理システムを開発する方法
Sep 28, 2023 pm 04:55 PM
React を使用して応答性の高いバックエンド管理システムを開発する方法 インターネットの急速な発展に伴い、日々の業務を処理するために効率的で柔軟で管理が容易なバックエンド管理システムを必要とする企業や組織が増えています。現在最も人気のある JavaScript ライブラリの 1 つである React は、ユーザー インターフェイスを構築するための簡潔で効率的かつ保守しやすい方法を提供します。この記事では、React を使用して応答性の高いバックエンド管理システムを開発する方法と、具体的なコード例を紹介します。まず React プロジェクトを作成します
Vue.js vs. React：プロジェクト固有の考慮事項
Apr 09, 2025 am 12:01 AM
VUE.JSは、中小規模のプロジェクトや迅速な反復に適していますが、Reactは大規模で複雑なアプリケーションに適しています。 1）Vue.jsは使いやすく、チームが不十分な状況やプロジェクトスケールが小さい状況に適しています。 2）Reactにはより豊富なエコシステムがあり、高性能で複雑な機能的ニーズを持つプロジェクトに適しています。
HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上
Apr 09, 2025 am 12:11 AM
ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。
反応にはどのようなクロージャがありますか?
Oct 27, 2023 pm 03:11 PM
React には、イベント処理関数、useEffect や useCallback、上位コンポーネントなどのクロージャがあります。詳細な紹介: 1. イベント処理関数のクロージャ: React では、コンポーネント内でイベント処理関数を定義すると、関数はクロージャを形成し、コンポーネントのスコープ内のステータスとプロパティにアクセスできます。このようにして、コンポーネントの状態とプロパティをイベント処理関数で使用して対話型ロジックを実装できます; 2. useEffect や useCallback のクロージャなど。
