Verwenden Sie React, um Komponenten auf bestimmten DOM-Knoten zu rendern

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von React zum Rendern von Komponenten auf dem angegebenen DOM-Knoten und die Verwendung von React zum Rendern der Komponente auf dem angegebenen DOM-Knoten erläutern Im Folgenden finden Sie einen praktischen Fall. Werfen wir einen Blick darauf.

Wie wir alle wissen, besteht einer der Vorteile von React darin, dass seine API besonders einfach ist. Indem Sie die Grundstruktur einer Komponente wie bei einer einfachen Funktion über die Render-Methode zurückgeben, können Sie eine wiederverwendbare Reaktionskomponente erhalten. Manchmal gibt es jedoch immer noch einige Einschränkungen, insbesondere in der API, die den DOM-Knoten, auf dem die Komponente gerendert werden soll, nicht steuern kann, was die Steuerung einiger Komponenten der elastischen Schicht erschwert. Wenn das übergeordnete Element auf <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 : versteckt gesetzt ist, liegt das Problem vor Es wird angezeigt.

Das sieht zum Beispiel so aus:

Der Effekt, den wir tatsächlich erwarten, ist dieser:

Glücklicherweise gibt es eine ziemlich elegante, wenn auch nicht offensichtliche Möglichkeit, dieses Problem zu umgehen. Die erste Reaktionsfunktion, die wir gelernt haben, ist die Render-Methode. Ihre Funktionssignatur lautet wie folgt:

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

Normalerweise verwenden wir diese Methode, um die gesamte Anwendung in einen DOM-Knoten zu rendern. Die gute Nachricht ist, dass die Methode hier noch nicht aufhört. Wir können die Methode ReactDom.render in einer Komponente verwenden, um eine andere Komponente in ein angegebenes DOM-Element zu rendern. Als Rendermethode einer Komponente muss sie rein sein (zum Beispiel: Sie kann den Status nicht ändern oder mit dem DOM interagieren. Wir müssen also die Methode ReactDom.render in ComponentDidUpdate oder ComponentDidMount aufrufen).

Darüber hinaus müssen wir sicherstellen, dass beim Entladen des übergeordneten Elements auch die geänderte Komponente entladen wird Nach dem Aussortieren erhalten wir die folgende Komponente:

Zusammenfassend:

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

Fügen Sie während „componentDidMount“ manuell ein p-Tag in den Körper ein und verwenden Sie dann ReactDom.render, um die Komponente in dieses p-Tag zu rendern

Wenn wir eine Komponente direkt in den Körper rendern möchten, müssen wir nur eine Schicht RenderInBody um die Komponente wickeln

Übersetzer hinzugefügt:

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

Durch die Transformation der oben genannten Komponenten können wir die Komponenten wie folgt rendern und auf den angegebenen Dom-Knoten entladen und eine Positionskontrolle hinzufügen:

Hinweis: Funktionen zur Positionserfassung und Wurzelknotenbeurteilung

//此组件用于在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;
 }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

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节点的筛选类名
/

Empfohlene Lektüre:

JS-Implementierung von Bildern, die auf Webseiten gezogen werden

Was ist der Lebenszyklus von React Native? Komponenten?

Das obige ist der detaillierte Inhalt vonVerwenden Sie React, um Komponenten auf bestimmten DOM-Knoten zu rendern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!