Home Web Front-end JS Tutorial Use React to render components to specified DOM nodes

Use React to render components to specified DOM nodes

Apr 18, 2018 am 11:51 AM
react designation rendering

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="http://www.php.cn/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]
)
Copy after login

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;
 }
}
Copy after login

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 {
   &lt;RenderInBody&gt;i am a dialog render to body&lt;/RenderInBody&gt;
  }
 }
}
Copy after login

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;
 }
}
Copy after login

Note: Position acquisition and root node judgment function

export default (dom,classFilters)=&gt; {
 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 &amp;&amp; current.matches(classFilters)) {
   rootDom = current;
   break;
  }
 }
 return { left: left, top: top ,rootDom:rootDom};
}
/***
1. dom:为响应弹层的dom节点,或者到该dom的位置后,可以做位置的微调,让弹层位置更佳合适
*
2. classFilters:需要接收弹层组件的DOM节点的筛选类名
/
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to build a real-time chat app with React and WebSocket How to build a real-time chat app with React and WebSocket Sep 26, 2023 pm 07:46 PM

How to build a real-time chat app with React and WebSocket

Guide to React front-end and back-end separation: How to achieve decoupling and independent deployment of front-end and back-end Guide to React front-end and back-end separation: How to achieve decoupling and independent deployment of front-end and back-end Sep 28, 2023 am 10:48 AM

Guide to React front-end and back-end separation: How to achieve decoupling and independent deployment of front-end and back-end

How to build simple and easy-to-use web applications with React and Flask How to build simple and easy-to-use web applications with React and Flask Sep 27, 2023 am 11:09 AM

How to build simple and easy-to-use web applications with React and Flask

How to build a reliable messaging app with React and RabbitMQ How to build a reliable messaging app with React and RabbitMQ Sep 28, 2023 pm 08:24 PM

How to build a reliable messaging app with React and RabbitMQ

How to build a fast data analysis application using React and Google BigQuery How to build a fast data analysis application using React and Google BigQuery Sep 26, 2023 pm 06:12 PM

How to build a fast data analysis application using React and Google BigQuery

React code debugging guide: How to quickly locate and solve front-end bugs React code debugging guide: How to quickly locate and solve front-end bugs Sep 26, 2023 pm 02:25 PM

React code debugging guide: How to quickly locate and solve front-end bugs

React responsive design guide: How to achieve adaptive front-end layout effects React responsive design guide: How to achieve adaptive front-end layout effects Sep 26, 2023 am 11:34 AM

React responsive design guide: How to achieve adaptive front-end layout effects

React Router User Guide: How to implement front-end routing control React Router User Guide: How to implement front-end routing control Sep 29, 2023 pm 05:45 PM

React Router User Guide: How to implement front-end routing control

See all articles