Maison > Article > interface Web > Comment encapsuler les composants réutilisables du portail à l'aide de React

Comment encapsuler les composants réutilisables du portail à l'aide de React

亚连original: 2018-06-14 11:45:421771parcourir

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

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. 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(&#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, code complet

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

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 Liés

Voir plus