React kapselt den Beispielcode einer wiederverwendbaren Portalkomponente-js-Tutorial-php.cn

React kapselt den Beispielcode einer wiederverwendbaren Portalkomponente

小云云

Freigeben： 2018-01-03 09:31:43

Original

2316 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Implementierungsplan

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

function createPortal() {

}
export default createPortal()

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!