Que signifie le portail en réaction ?

Portal in React fournit un bon moyen de restituer les nœuds enfants en nœuds DOM dans la hiérarchie DOM en dehors du composant parent. La syntaxe est [ReactDOM.createPortal(child, containers)].

Portals fournit un moyen intéressant de restituer les nœuds enfants en nœuds DOM dans la hiérarchie DOM en dehors du composant parent.

Syntaxe :

ReactDOM.createPortal(child, container)

Le premier paramètre (enfant) est tout élément enfant React pouvant être rendu, tel qu'un élément, une chaîne ou un fragment. Le deuxième paramètre (conteneur) est un élément DOM.

Habituellement, un élément renvoyé par la méthode de rendu du composant. Cet élément ne peut être assemblé qu'à son élément parent le plus proche dans le nœud DOM, mais il est parfois également nécessaire de l'insérer dans une position différente dans le nœud DOM :

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

Un cas d'utilisation typique des portails est lorsque le composant parent a un style overflow: hidden ou z-index et que vous avez besoin que ses composants enfants sortent visuellement de leur conteneur. Par exemple, les boîtes de dialogue, les hovercards et les info-bulles.

Recommandations d'apprentissage gratuites associées : JavaScript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!