Use React to render components to specified DOM nodes

This time I will bring you the precautions of using React to render components to the specified DOM node and using React to render the component to the specified DOM node. The following is a practical case. , let’s take a look.

As we all know, one of the advantages of React is that its API is particularly simple. By returning the basic structure of a component through the render method, just like a simple function, you can get a reusable react component. But sometimes there are still some restrictions, especially in its API, which cannot control the DOM node that the component should be rendered to, which makes it difficult to control some elastic layer components. The problem will arise when the parent element is set to <a href="//m.sbmmt.com/wiki/923.html" target="_blank">overflow</a>:hidden .

For example, it looks like this:

The effect we actually expect is this:

Fortunately, there is a fairly elegant, although not obvious, way to get around this problem. The first react function we learned is the render method, and its function signature is like this:

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

Normally we use this method to render the entire application into a DOM node. The good news is that the method doesn't stop there. We can use the ReactDom.render method in one component to render another component into a specified DOM element. As a component's render method, it must be pure (for example: it cannot change state or interact with the DOM). So we need to call the ReactDom.render method in componentDidUpdate or componentDidMount.

In addition, we need to ensure that when the parent element is unloaded, the modified component will also be unloaded.

After sorting it out, we get the following component:

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

To sum up:

Manually insert a p tag into the body during componentDidMount, and then use ReactDom.render to render the component to the p tag

When we want to render a component directly to the body, we only need to wrap a layer of RenderInBody around the component.

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

Translator added:

By transforming the above components, we can render and unload the components to the specified dom node, and add position control, as follows:

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

Note: Position acquisition and root node judgment function

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

JS implementation of images being dragged on web pages

What is the life cycle of React Native components?

The above is the detailed content of Use React to render components to specified DOM nodes. For more information, please follow other related articles on the PHP Chinese website!