React encapsule l'exemple de code d'un composant réutilisable du portail-js tutoriel-php.cn

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

小云云

Libérer： 2018-01-03 09:31:43

original

2346 Les gens l'ont consulté

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>

Copier après la connexion

2 Après avoir utilisé Portal, il peut devenir comme suit

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

Copier après la connexion

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>

Copier après la connexion

Plan de mise en œuvre

1. Créez une fonction createPortal, qui renverra un composant Portal

function createPortal() {

}
export default createPortal()

Copier après la connexion

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

Copier après la connexion

3. Implémentez la fonction de rendu et utilisez createPortal pour créer le portail.

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

Copier après la connexion

4. Implémentation de la fonction ComponentDidMount, ajouter un dom au corps

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

Copier après la connexion

5. Implémentation de la fonction ComponentWillUnmount, effacer la structure DOM

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!