快捷導(dǎo)航

React如何將組件渲染到指定DOM節(jié)點(diǎn)詳解

更新時(shí)間：2017年09月08日 08:35:15 作者：neoveee

這篇文章主要給大家介紹了關(guān)于React如何將組件渲染到指定DOM節(jié)點(diǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)下吧。

前言

眾所周知React優(yōu)點(diǎn)之一就是他的API特別簡(jiǎn)單。通過(guò)render 方法返回一個(gè)組件的基本結(jié)構(gòu)，如同一個(gè)簡(jiǎn)單的函數(shù)，就可以得到一個(gè)可以復(fù)用的react組件。但是有時(shí)候還是會(huì)有些限制的，尤其是他的API中，不能控制組件所應(yīng)該渲染到的DOM節(jié)點(diǎn)，這就讓一些彈層組件很難控制。當(dāng)父元素設(shè)置為overflow：hidden 的時(shí)候，問(wèn)題就會(huì)出現(xiàn)了。

例如就像下面的這樣：

我們實(shí)際期待的效果是這樣的：

幸運(yùn)的是，雖然不是很明顯，但有一個(gè)相當(dāng)優(yōu)雅的方式來(lái)繞過(guò)這個(gè)問(wèn)題。我們學(xué)到的第一個(gè)react函數(shù)是render 方法，他的函數(shù)簽名是這樣的:

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

通常情況下我們使用該方法將整個(gè)應(yīng)用渲染到一個(gè)DOM節(jié)點(diǎn)中。好消息是該方法并不僅僅局限于此。我們可以在一個(gè)組件中，使用ReactDom.render 方法將另一個(gè)組件渲染到一個(gè)指定的DOM 元素中。作為一個(gè)組件的render 方法，其必須是純凈的（例如：不能改變state或者與DOM交互）.所以我們需要在componentDidUpdate 或者 componentDidMount 中調(diào)用ReactDom.render 方法。

另外我們需要確保在父元素被卸載的時(shí)候，改組件也要被卸載掉.

整理下，我們得到下面的一個(gè)組件：

import React,{Component} from 'react';
import ReactDom from 'react-dom';
export default class RenderInBody extends Component{
 constructor(p){
  super();
 }
 componentDidMount(){//新建一個(gè)div標(biāo)簽并塞進(jìn)body
  this.popup = document.createElement("div");
  document.body.appendChild(this.popup);
  this._renderLayer();
 }
 componentDidUpdate() {
  this._renderLayer();
 }
 componentWillUnmount(){//在組件卸載的時(shí)候，保證彈層也被卸載掉
  ReactDom.unmountComponentAtNode(this.popup);
  document.body.removeChild(this.popup);
 }
 _renderLayer(){//將彈層渲染到body下的div標(biāo)簽
  ReactDom.render(this.props.children, this.popup);
 }
 render(){
  return null;
 }
}

總結(jié)下就是：

在componentDidMount的時(shí)候手動(dòng)向body內(nèi)塞一個(gè)div標(biāo)簽，然后使用ReactDom.render 將組件渲染到這個(gè)div標(biāo)簽

當(dāng)我們想把組件直接渲染到body上的時(shí)候，只需要在該組件的外面包一層RenderInBody 就可以了.

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

譯者增加：

將以上組件改造一下，我們就可以向指定的dom節(jié)點(diǎn)中渲染和卸載組件，并加上位置控制，如下：

//此組件用于在body內(nèi)渲染彈層
import React,{Component} from 'react'
import ReactDom from 'react-dom';
export default class RenderInBody extends Component{
 constructor(p){
  super(p);
 }
 componentDidMount(){
  /**
  popupInfo={
   rootDom:***,//接收彈層組件的DOM節(jié)點(diǎn)，如document.body
   left:***,//相對(duì)位置
   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;
 }
}

注：位置獲取和根結(jié)點(diǎn)判斷函數(shù)

export default (dom,classFilters)=> {
 let left = dom.offsetLeft,
  top = dom.offsetTop + dom.scrollTop,
  current = dom.offsetParent,
  rootDom = accessBodyElement(dom);//默認(rèn)是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:為響應(yīng)彈層的dom節(jié)點(diǎn)，或者到該dom的位置后，可以做位置的微調(diào)，讓彈層位置更佳合適
*
2. classFilters:需要接收彈層組件的DOM節(jié)點(diǎn)的篩選類名
/

原文地址

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: