React 는 어떻게 구성 요 소 를 지정 한 DOM 노드 에 렌 더 링 하 는 지 설명 합 니 다.

머리말
알다 시 피 React 의 장점 중 하 나 는 그의 API 가 매우 간단 하 다 는 것 이다.render 방법 을 통 해 하나의 구성 요소 의 기본 구 조 를 되 돌려 줍 니 다.간단 한 함수 처럼 재 활용 가능 한 react 구성 요 소 를 얻 을 수 있 습 니 다.그러나 가끔 은 제한 이 있 습 니 다.특히 그의 API 에 서 는 구성 요소 가 과장 해 야 할 DOM 노드 를 제어 할 수 없어 서 일부 탄 층 구성 요 소 를 제어 하기 어렵 습 니 다.부모 요소 가overflow：hidden 로 설정 되면 문제 가 발생 합 니 다.
예 를 들 어 아래 와 같이:

우리 가 실제로 기대 하 는 효 과 는 이렇다.

다행히 뚜렷 하 지 는 않 지만 이 문 제 를 우회 하 는 상당히 우아 한 방법 이 있다.우리 가 배 운 첫 번 째 react 함 수 는 render 방법 입 니 다.그의 함수 서명 은 다음 과 같 습 니 다.

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

일반적인 상황 에서 우 리 는 이 방법 을 사용 하여 전체 응용 을 DOM 노드 에 렌 더 링 합 니 다.좋 은 소식 은 이 방법 이 여기에 만 국 한 된 것 이 아니 라 는 것 이다.우 리 는 한 구성 요소 에서ReactDom.render방법 으로 다른 구성 요 소 를 지정 한 DOM 요소 에 렌 더 링 할 수 있 습 니 다.구성 요소 의 render 방법 으로서 깨끗 해 야 합 니 다(예 를 들 어 state 를 바 꾸 거나 DOM 과 상호작용 할 수 없습니다).따라서 우 리 는 componentDidUpdate 나 componentDidMount 에서 호출ReactDom.render 방법 이 필요 합 니 다.
또한 부모 요소 가 마 운 트 해제 되 었 을 때 구성 요소 도 마 운 트 해제 되 어야 합 니 다.
정리 하면 다음 구성 요 소 를 얻 을 수 있 습 니 다.

import React,{Component} from 'react';
import ReactDom from 'react-dom';
export default class RenderInBody extends Component{
 constructor(p){
  super();
 }
 componentDidMount(){//    div     body
  this.popup = document.createElement("div");
  document.body.appendChild(this.popup);
  this._renderLayer();
 }
 componentDidUpdate() {
  this._renderLayer();
 }
 componentWillUnmount(){//        ，         
  ReactDom.unmountComponentAtNode(this.popup);
  document.body.removeChild(this.popup);
 }
 _renderLayer(){//      body  div  
  ReactDom.render(this.props.children, this.popup);
 }
 render(){
  return null;
 }
}

요약 하면:
componentDidMount 에 div 탭 을 수 동 으로 넣 은 다음 ReactDom.render 를 사용 하여 이 div 탭 에 구성 요 소 를 렌 더 링 합 니 다.
우리 가 구성 요 소 를 body 에 직접 렌 더 링 하고 싶 을 때,이 구성 요소 의 바깥쪽 에 RenderInBody 를 한 층 만 있 으 면 됩 니 다.

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

번역자 증가:
상기 구성 요 소 를 개조 하면 우 리 는 지정 한 dom 노드 에 구성 요 소 를 렌 더 링 하고 마 운 트 해제 할 수 있 으 며 위치 제 어 를 추가 할 수 있 습 니 다.다음 과 같 습 니 다.

//      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('div');
  this.rootDom = popupInfo.rootDom;  
  this.rootDom.appendChild(this.popup);
  //we can setAttribute of the div 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;
 }
}

주:위치 획득 과 근결 점 판단 함수

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       
/

주소
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.