React は、ポータルの再利用可能なコンポーネントのサンプル コードをカプセル化します。

React のコアの 1 つはコンポーネントです。この記事では、React チュートリアルでポータルの再利用可能なコンポーネントのカプセル化に関する関連情報を主に紹介します。必要な方は以下を参照してください。一緒に学びましょう。

ポータルの紹介

したがって、次のことを行うユニバーサルコンポーネントが必要です:

• はコンポーネント内で宣言的に書くことができます

• は宣言された場所を実際にはレンダリングしません

• 遷移アニメーションをサポートします

そして、モーダル、ツールチップ、通知などのコンポーネントは、このコンポーネントに基づいて作成できます。このコンポーネントをポータルと呼びます。

React16+ を使用している場合は、少なくとも Portal について知っているか、Portal の使用に習熟している必要があります。

ポータルは、ルート要素の外側に DOM を作成できます。

1. 通常、Web サイトにはルートが 1 つしかありません

 <p></p>

2. Portal を使用すると、次のようになります

 <p></p>
 

Portal の高レベルコンポーネントのカプセル化

Portal のデモは、公式 Web サイトで見ることができます。実現するのは、それを再利用可能なコンポーネントにカプセル化することです。

目標

本文の下にHTMLを手動で追加する必要はなく、コンポーネントを通じて自分で作成します。

<createportal>
 此处插入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 サイトの他の関連記事を参照してください。