Explication détaillée de la méthode de React pour rendre les composants sur des nœuds DOM spécifiés

Cet article vous présente principalement les informations pertinentes sur la façon dont React restitue les composants vers des nœuds DOM spécifiés. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous les amis qui en ont besoin. suivez l'éditeur pour apprendre ensemble.

Avant-propos

Comme nous le savons tous, l'un des avantages de React est que son API est particulièrement simple. En renvoyant la structure de base d'un composant via la méthode render, tout comme une simple fonction, vous pouvez obtenir un composant de réaction réutilisable. Mais parfois, il existe encore certaines restrictions, notamment dans son API, qui ne peuvent pas contrôler le nœud DOM sur lequel le composant doit être rendu, ce qui rend difficile le contrôle de certains composants de la couche élastique. Le problème se produit lorsque l'élément parent est défini sur overflow：hidden .

Par exemple, cela ressemble à ceci :

L'effet que nous attendons réellement est le suivant :

Heureusement, même si ce n'est pas évident, il existe une manière assez élégante de contourner ce problème. La première fonction de réaction que nous avons apprise est la méthode render. Sa signature de fonction est la suivante :

ReactComponent render(
 ReactElement element,
 DOMElement container,
 [function callback]
)

Habituellement, nous utilisons cette méthode pour restituer l'intégralité de l'application dans un nœud DOM. . La bonne nouvelle est que la méthode ne s’arrête pas là. Nous pouvons utiliser la méthode ReactDom.render dans un composant pour restituer un autre composant dans un élément DOM spécifié. En tant que méthode de rendu d'un composant, elle doit être pure (par exemple : elle ne peut pas changer d'état ni interagir avec le DOM). Nous devons donc appeler la méthode ReactDom.render dans composantDidUpdate ou composantDidMount.

De plus, nous devons nous assurer que lorsque l'élément parent est déchargé, le composant modifié sera également déchargé

Après l'avoir trié, nous obtenons le composant suivant :

<.>

import React,{Component} from 'react';
import ReactDom from 'react-dom';
export default class RenderInBody extends Component{
 constructor(p){
  super();
 }
 componentDidMount(){//新建一个p标签并塞进body
  this.popup = document.createElement("p");
  document.body.appendChild(this.popup);
  this._renderLayer();
 }
 componentDidUpdate() {
  this._renderLayer();
 }
 componentWillUnmount(){//在组件卸载的时候，保证弹层也被卸载掉
  ReactDom.unmountComponentAtNode(this.popup);
  document.body.removeChild(this.popup);
 }
 _renderLayer(){//将弹层渲染到body下的p标签
  ReactDom.render(this.props.children, this.popup);
 }
 render(){
  return null;
 }
}

Pour résumer :

Insérez manuellement une balise p dans le corps pendant composantDidMount, puis utilisez ReactDom.render pour restituer le composant dans cette balise p

Lorsque nous voulons restituer un composant directement sur le corps, il suffit d'enrouler une couche de RenderInBody autour du composant.

export default class Dialog extends Component{
 render(){
  return {
   <RenderInBody>i am a dialog render to body</RenderInBody>
  }
 }
}

Traducteur ajouté :

En transformant les composants ci-dessus, nous pouvons restituer et décharger les composants sur le nœud dom spécifié, et ajouter un contrôle de position, comme suit :

//此组件用于在body内渲染弹层
import React,{Component} from 'react'
import ReactDom from 'react-dom';
export default class RenderInBody extends Component{
 constructor(p){
  super(p);
 }
 componentDidMount(){
  /**
  popupInfo={
   rootDom:***,//接收弹层组件的DOM节点，如document.body
   left:***,//相对位置
   top:***//位置信息
  }
  */
  let {popupInfo} = this.props; 
  this.popup = document.createElement('p');
  this.rootDom = popupInfo.rootDom;  
  this.rootDom.appendChild(this.popup);
  //we can setAttribute of the p only in this way
  this.popup.style.position='absolute';
  this.popup.style.left=popupInfo.left+'px';
  this.popup.style.top=popupInfo.top+'px';
  this._renderLayer()
 }
 componentDidUpdate() {
  this._renderLayer();
 }
 componentWillUnmount(){
  this.rootDom.removeChild(this.popup);
 }
 _renderLayer(){
  ReactDom.render(this.props.children, this.popup);
 }
 render(){
  return null;
 }
}

Remarque : Fonction d'acquisition de position et de jugement du nœud racine

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!