ホームページ > 記事 > ウェブフロントエンド > React は、ポータルの再利用可能なコンポーネントのサンプルコードをカプセル化します。

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

小云云オリジナル: 2018-01-03 09:31:432322ブラウズ

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 の実装アイデアは似ており、関数型プログラミングのアイデアを使用して目標を達成します。これが便利だと思うなら、ぜひ使ってください。

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

関連記事

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