React を使用して Portal の再利用可能なコンポーネントをカプセル化する方法-jsチュートリアル-php.cn

React を使用して Portal の再利用可能なコンポーネントをカプセル化する方法

亚连

リリース： 2018-06-14 11:45:42

オリジナル

1770 人が閲覧しました

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

ポータルの紹介

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

はコンポーネント内で宣言的に書くことができます
は宣言された場所を実際にはレンダリングしません
遷移アニメーションをサポートします

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

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

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

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

<body>
 <p id="root"></p>
</body>

ログイン後にコピー

2. ポータルを使用すると、次のようになります

ポータルのハイエンドコンポーネントのカプセル化

公式 Web サイトでご覧ください。私たちが達成したいのは、それを再利用可能なコンポーネントにカプセル化することです。

目標

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

<body>
 <p id="root"></p>
 <p id="portal"></p>
</body>

ログイン後にコピー

実装計画

1. Portalコンポーネントを返すcreatePortal関数を作成します

<CreatePortal
 id, //可以传入id
 className, //可以传入className
 style //可以传入style
 >
 此处插入p或者react组件
</CreatePortal>

ログイン後にコピー

2. Render関数の実装を作成し、createPortalを使用してポータルを作成します。

function createPortal() {

}
export default createPortal()

ログイン後にコピー

4.componentDidMount関数の実装、ボディにdomを追加

import React from &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;
import PropTypes from &#39;prop-types&#39;
function createPortal() {
 class Portal extends React.Component{
 }
 return Portal
}
export default createPortal()

ログイン後にコピー

5.componentWillUnmount関数の実装、DOM構造をクリア

render() {
 return ReactDOM.createPortal(
  this.props.children,
  this.el
 )
}

ログイン後にコピー

6.コードを完成させる

componentDidMount() {
 document.body.appendChild(this.el);
}

ログイン後にコピー

以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

vuexの中国語ドキュメントの詳細な紹介

ルーターのクロスモジュールジャンプ問題を解決する方法

純粋なJSでドロップダウンリストを生成する方法

以上がReact を使用して Portal の再利用可能なコンポーネントをカプセル化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。