Maison >interface Web >js tutoriel >React encapsule l'exemple de code d'un composant réutilisable du portail

React encapsule l'exemple de code d'un composant réutilisable du portail

小云云original: 2018-01-03 09:31:432420parcourir

L'un des cœurs de React est constitué de composants. Cet article vous présente principalement les informations pertinentes sur l'encapsulation d'un composant réutilisable du portail dans le didacticiel React. 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. . Ce qui suit est Venez apprendre avec moi.

Introduction au portail

Nous avons donc besoin d'un composant universel qui fait les choses suivantes :

peut être écrit de manière déclarative dans un Dans le 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>

Composant avancé du portail. encapsulation

La démo de Portal est visible sur le site officiel, et ce que nous voulons réaliser, c'est l'encapsuler dans un composant réutilisable.

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 Créer un composant Portal

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émentez la fonction de rendu et 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()

Résumé

createPortal et Provide ont des idées d'implémentation similaires, en utilisant la programmation fonctionnelle. des idées pour atteindre les objectifs. Si vous pensez que cette chose est utile, allez-y et utilisez-la.

Recommandations associées :

Présentation d'Oracle Portal et de son développement de portail

Notes d'étude Liferay (1) Environnement Liferay Portal5.2.3 Initial configuration

Oracle Fusion Middleware Ⅱ : Weblogic, UCM, WebCenter Portal

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la simulation de couche de nœuds pour implémenter le téléchargement de fichiers de formulaire en plusieurs partiesArticle suivant：Explication détaillée de la simulation de couche de nœuds pour implémenter le téléchargement de fichiers de formulaire en plusieurs parties

Articles Liés

Voir plus