Utiliser React pour restituer les composants sur les nœuds DOM spécifiés

Cette fois, je vais vous expliquer quelles sont les précautions pour utiliser React pour restituer les composants sur le nœud DOM spécifié et pour utiliser React pour restituer le composant sur le nœud DOM spécifié. Voici un cas pratique, jetons un coup d'oeil.

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. Lorsque l'élément parent est défini sur <a href="http://www.php.cn/wiki/923.html" target="_blank">overflow<code><a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>：hidden  : caché , le problème cela apparaîtra.

Par exemple, cela ressemble à ceci :

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

Heureusement, il existe un moyen assez élégant, quoique pas évident, de contourner ce problème. La première fonction de réaction que nous avons apprise est la méthode de rendu, et sa signature de fonction ressemble à ceci :

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

Normalement, 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 componentDidMount, 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 : fonctions d'acquisition de position et de jugement du nœud racine

export default (dom,classFilters)=> {
 let left = dom.offsetLeft,
  top = dom.offsetTop + dom.scrollTop,
  current = dom.offsetParent,
  rootDom = accessBodyElement(dom);//默认是body
 while (current !=null ) {
  left += current.offsetLeft;
  top += current.offsetTop;
  current = current.offsetParent;
  if (current && current.matches(classFilters)) {
   rootDom = current;
   break;
  }
 }
 return { left: left, top: top ,rootDom:rootDom};
}
/***
1. dom:为响应弹层的dom节点，或者到该dom的位置后，可以做位置的微调，让弹层位置更佳合适
*
2. classFilters:需要接收弹层组件的DOM节点的筛选类名
/

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP. !

Lecture recommandée :

Implémentation JS des images glissées sur les pages Web

Quel est le cycle de vie de React Native composants ?

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!