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!
