Maison > Article > interface Web > Comment encapsuler les composants réutilisables du portail à l'aide de React
L'un des cœurs de React est constitué de composants. L'article suivant vous présente principalement les informations pertinentes sur le didacticiel React d'encapsulation d'un composant réutilisable du portail. L'article le présente en détail à travers un exemple de code. Les amis qui en ont besoin peuvent s'y référer. ça, apprenons ensemble ci-dessous.
Introduction au portail
Nous avons donc besoin d'un composant général qui fait les choses suivantes :
Peut être écrit de manière déclarative dans un composant
ne s'affiche pas réellement là où il est déclaré
Prend en charge l'animation de transition
Ensuite, des composants tels que modal, info-bulle, notification, etc. peuvent être basés sur ce composant. Nous appelons ce composant Portal.
Si vous utilisez React16+, vous devez au moins connaître quelque chose sur Portal ou maîtriser son utilisation.
Le portail peut créer un DOM en dehors de votre élément racine.
1. Habituellement, votre site Web n'a qu'une seule racine
<body> <p id="root"></p> </body>
2. Après avoir utilisé Portal, il peut devenir comme suit
.<body> <p id="root"></p> <p id="portal"></p> </body>
Encapsulation de composants d'ordre élevé du portail
La démo de Portal peut être vue sur le site officiel, et ce que nous voulons réaliser est de encapsulez-le dans un composant pouvant être réutilisé.
Cible
Il n'est pas nécessaire d'ajouter manuellement du HTML sous le corps, créez-le vous-même via des composants.
<CreatePortal id, //可以传入id className, //可以传入className style //可以传入style > 此处插入p或者react组件 </CreatePortal>
Plan de mise en œuvre
1. Créez une fonction createPortal, qui renverra un composant Portal
function createPortal() { } export default createPortal()
2.
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. Implémentation de la fonction de rendu, utilisez createPortal pour créer le portail.
render() { return ReactDOM.createPortal( this.props.children, this.el ) }
4. Implémentation de la fonction ComponentDidMount, ajouter un dom au corps
componentDidMount() { document.body.appendChild(this.el); }
5. Implémentation de la fonction ComponentWillUnmount, effacer la structure DOM
componentWillUnmount() { document.body.removeChild(this.el) }
6. . Implémentez les accessoires, y compris id, className, style
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, code complet
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()
Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde. l'avenir.
Articles connexes :
Introduction détaillée au document chinois vuex
Comment résoudre le problème du saut inter-modules du routeur
Comment générer une liste déroulante en utilisant pure js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!