What does portal mean in react?

Portal in React provides a good way to render child nodes into DOM nodes in the DOM hierarchy outside the parent component. The syntax is [ReactDOM.createPortal(child, container)].

Portals Provides a nice way to render child nodes into DOM nodes in the DOM hierarchy outside the parent component.

Syntax:

ReactDOM.createPortal(child, container)

The first parameter (child) is any renderable React child element, such as an element, string or fragment. The second parameter (container) is a DOM element.

Usually an element returned from the component's render method. This element can only be assembled to its nearest parent element in the DOM node, but sometimes it is also necessary to insert it into different positions in the DOM node:

render() {
  // React 不会创建新的 div。他渲染子元素到 `domNode` 中。
  // `domNode` 可以是任意有效的 DOM 节点，无论他在 DOM 中的位置如何。
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

A typical use case for portal is when the parent component has overflow: hidden or z-index styles and you need its child components to visually jump out of it. container. For example, dialog boxes, hovercards, and tooltips.

Related free learning recommendations: JavaScript (video)

The above is the detailed content of What does portal mean in react?. For more information, please follow other related articles on the PHP Chinese website!