Specific use of Portal in React

React is a library for building user interfaces that allows developers to build complex components and applications. In React, sometimes you may encounter situations where you need to render a component to different parts of the DOM, not limited to the hierarchy of its parent component. At this time,PortalIt came into being. This article will explore the Portal in React in depth, including its definition, working principle, usage scenarios, strengths and weaknesses, and how to apply it in real projects.

1. Definition of Portal

Portal is a feature introduced in React 16 that allows you to render components to a different location in the DOM tree, rather than the DOM location of its parent component. Using Portal, you can insert content into different hierarchies of your application, such as in modal boxes, tooltips, drop-down menus and other components.

1.1 Basic usage

The basic form of using Portal is as follows:

import React from 'react';
import ReactDOM from 'react-dom';

const MyPortal = ({ children }) => {
  return (
    children,
    ('portal-root') // Target DOM node  );
};

In this example,MyPortalThe component renders its content to a idportal-rootDOM node, not its parent component.

2. How Portal works

Portal's implementation depends on React'smethod. This method accepts two parameters:

• The child element to render(usually a React component or element).
• Target DOM nodewhere you want these elements to be rendered.

2.1 DOM tree structure example

Suppose we have an application, and the following is its DOM tree structure:

<div >
  <div ></div>
</div>

If we aremodal-rootA modal box is rendered internally, and its structure may look like this:

const Modal = () => {
  return (
    <div className="modal">
      <h1>This is a modal box</h1>
    </div>,
    ('modal-root') // Render to this location  );
};

In this case, althoughModalComponents may be nested in other components in the application, but their actual rendering location is in the DOM tree.modal-rootmiddle.

3. Portal usage scenarios

Portal is very useful in many scenarios, and here are some typical use cases:

3.1 Modal Box

Modal boxes are common interface elements that usually require covering the entire screen. In this case, render the modal box to the root node of the application (e.g.#modal-root) can avoid the problem of CSS style cascade.

3.2 Tooltip

When working with tooltips, it is often necessary to render it outside of the parent component to better handle position and style.

3.3 Pull-down menu

The drop-down menu may sometimes be nested in other elements. Using Portal ensures that the content of the menu is not CSS styled by the parent component (such asoverflow: hidden) Obstruct.

3.4 Popup window

Popups such as notifications or warning boxes can also be rendered using Portal to ensure that they are always in user-visible areas.

4. Advantages of Portal

4.1 Decoupled component structure

Using Portal, the logic of a component can be decoupled from its rendering position. This makes components more flexible and can be reused in different contexts without being affected by parent component effects.

4.2 Better style control

Portal makes it easier to control styles in some cases and avoid conflicts in CSS styles. For example, a modal box may be sucked by the parent component'soverflow: hiddenStyle influence, using Portal can avoid this problem.

4.3 More direct DOM access

Through Portal, developers can render components to any location in the DOM, simplifying the interaction between components and DOM. For example, some components may need to be integrated directly with the DOM.

5. Portal’s disadvantages

5.1 Additional DOM nodes

Using Portal may result in additional DOM nodes, which may in some cases bring performance overhead. Although this effect is minimal for most applications, it needs to be considered in performance-sensitive applications.

5.2 Increase complexity

Although Portal makes the implementation of components such as modal boxes and tooltips simpler, it also increases the complexity of the application. Developers need to manage state and events more carefully because the rendering position of components is no longer consistent with the component's hierarchy.

5.3 Event handling issues

When using Portal, the bubbling of certain events may become more complex because they are in different locations in the DOM tree. This may cause events to not be processed as expected in the parent component.

6. Portal in practical applications

6.1 Creating modal box components

Here is an example of using Portal to create a simple modal box.

6.1.1 Modal Components

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <h1>Modal box title</h1>
        <button onClick={onClose}>closure</button>
      </div>
    </div>,
    ('modal-root')
  );
};

export default Modal;

6.1.2 Using modal boxes

import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open the modal box</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} />
    </div>
  );
};

export default App;

In this example,ModalComponents are only inisOpenfortrueRender when  and use Portal to render its content tomodal-rootmiddle.

6.2 CSS Style

To make the modal box look better, you can add some simple CSS styles:

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

7. Conclusion

Portal is a powerful and flexible tool in React that allows developers to implement more complex rendering logic between components. Through Portal, developers can decouple the rendering position of components from their logic, thereby improving application flexibility and reusability.

While Portal brings many advantages, such as better style control and decoupling structures, it also needs to be aware of the additional complexity and possible performance overhead it brings.

In React development, using Portal rationally can significantly improve the user experience, especially when building model boxes, tooltips, and other pop-up components. Hopefully this article helps you better understand Portal in React, so that you can easily build complex interfaces.

This is the end of this article about the specific use of Portal in React. For more related React Portal content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!