Heim > Artikel > Web-Frontend > React kapselt den Beispielcode einer wiederverwendbaren Portalkomponente

React kapselt den Beispielcode einer wiederverwendbaren Portalkomponente

小云云Original: 2018-01-03 09:31:432317Durchsuche

Einer der Kerne von React sind Komponenten. Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zum React-Tutorial zum Kapseln einer wiederverwendbaren Portalkomponente vor. Freunde, die es benötigen, können darauf zurückgreifen . Das Folgende ist: Komm und lerne mit mir.

Portal-Einführung

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

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

Dann Auf dieser Komponente können Komponenten wie Modal, Tooltip, Benachrichtigung usw. 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 sie wie folgt aussehen:

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

Portal Advanced Component Kapselung

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

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 Portalkomponente zurückgibt

function createPortal() {

}
export default createPortal()

2. Erstellen Sie eine Portalkomponente

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

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 . Implementieren Sie Requisiten, einschließlich ID, Klassenname, Stil

constructor(props) {
 super(props)
 this.el = document.createElement('p')
 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 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
function createPortal() {
 class Portal extends React.Component{
  constructor(props) {
   super(props)
   this.el = document.createElement('p')
   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()

Zusammenfassung

createPortal und Provide haben ähnliche Implementierungsideen unter Verwendung funktionaler Programmierung Ideen, um Ziele zu erreichen. Wenn Sie denken, dass dieses Ding nützlich ist, nutzen Sie es.

Verwandte Empfehlungen:

Überblick über Oracle Portal und seine Portalentwicklung

Liferay-Studiennotizen (1) Liferay Portal5.2.3-Umgebung Initial Setup

Oracle Fusion Middleware Ⅱ: Weblogic, UCM, WebCenter Portal

Das obige ist der detaillierte Inhalt vonReact kapselt den Beispielcode einer wiederverwendbaren Portalkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Ausführliche Erläuterung der Knotenschichtsimulation zur Implementierung des mehrteiligen Formulardatei-UploadsNächster Artikel：Ausführliche Erläuterung der Knotenschichtsimulation zur Implementierung des mehrteiligen Formulardatei-Uploads

In Verbindung stehende Artikel

Mehr sehen