Heim > Artikel > Web-Frontend > So kapseln Sie wiederverwendbare Portalkomponenten mithilfe von React

So kapseln Sie wiederverwendbare Portalkomponenten mithilfe von React

亚连Original: 2018-06-14 11:45:421747Durchsuche

Einer der Kerne von React sind Komponenten. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zum React-Tutorial zum Kapseln einer wiederverwendbaren Portalkomponente ein. Der Artikel stellt es detailliert anhand von Beispielcode vor es, lasst uns unten gemeinsam lernen.

Portal-Einführung

Wir brauchen also eine allgemeine Komponente, die die folgenden Dinge tut:

Kann deklarativ in einer Komponente geschrieben werden
wird nicht dort gerendert, wo es deklariert ist
Unterstützt Übergangsanimationen

Dann können Komponenten wie Modal, Tooltip, Benachrichtigung usw. auf dieser Komponente basieren. Wir nennen diese Komponente Portal.

Wenn Sie React16+ verwenden, müssen Sie zumindest etwas über Portal wissen oder es beherrschen.

Portal kann ein DOM außerhalb Ihres Stammelements erstellen.

1. Normalerweise hat Ihre Website nur einen Stamm

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

2. Nach der Verwendung von Portal kann es wie folgt aussehen:

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

Portal-Komponentenkapselung hoher Ordnung

Die Demo von Portal ist auf der offiziellen Website zu sehen. Unser Ziel ist es, sie in eine Kapselung zu kapseln wiederverwendbare Komponenten.

Ziel

Es ist nicht erforderlich, HTML manuell unter dem Text hinzuzufügen, sondern erstellen Sie es selbst über Komponenten.

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

Implementierungsplan

1. Erstellen Sie eine createPortal-Funktion, die eine Portal-Komponente zurückgibt

function createPortal() {

}
export default createPortal()

2. Portal-Komponente erstellen

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()

3. Implementieren Sie die Renderfunktion und verwenden Sie createPortal, um das Portal zu erstellen.

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

4. Implementierung der Funktion „componentDidMount“, dom zum Körper hinzufügen

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

5. Implementierung der Funktion „componentWillUnmount“, klare DOM-Struktur

componentWillUnmount() {
   document.body.removeChild(this.el)
  }

6. Implementierung von Requisiten, einschließlich id, className, style

constructor(props) {
 super(props)
 this.el = document.createElement(&#39;p&#39;)
 if (!!props) {
  this.el.id = props.id || false
  if (props.className) this.el.className = props.className
  if (props.style) {
   Object.keys(props.style).map((v) => {
    this.el.style[v] = props.style[v]
   })
  }
  document.body.appendChild(this.el)
 }
}

7, vollständiger Code

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{
  constructor(props) {
   super(props)
   this.el = document.createElement(&#39;p&#39;)
   if (!!props) {
    this.el.id = props.id || false
    if (props.className) this.el.className = props.className
    if (props.style) {
     Object.keys(props.style).map((v) => {
      this.el.style[v] = props.style[v]
     })
    }
    document.body.appendChild(this.el)
   }
  }
  componentDidMount() {
   document.body.appendChild(this.el);
  }
  componentWillUnmount() {
   document.body.removeChild(this.el)
  }
  render() {
   return ReactDOM.createPortal(
    this.props.children,
    this.el
   )
  }
 }
 Portal.propTypes = {
  style: PropTypes.object
 }
 return Portal
}
export default createPortal()

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Einführung in das chinesische Dokument von vuex

So lösen Sie das Problem des modulübergreifenden Router-Sprungsproblems

So generieren Sie eine Dropdown-Liste mit reinem JS

Das obige ist der detaillierte Inhalt vonSo kapseln Sie wiederverwendbare Portalkomponenten mithilfe von React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html 封装 JS dom

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie das Dropdown-Feld „Bootstrap+Selectpicker“ in tatsächlichen ProjektenNächster Artikel：So verwenden Sie das Dropdown-Feld „Bootstrap+Selectpicker“ in tatsächlichen Projekten

In Verbindung stehende Artikel

Mehr sehen