Heim > Web-Frontend > js-Tutorial > Hauptteil

Was bedeutet Portal in Reaktion?

coldplay.xixi
Freigeben: 2020-11-17 14:02:26
Original
3539 Leute haben es durchsucht

Portal in React bietet eine gute Möglichkeit, untergeordnete Knoten in DOM-Knoten in der DOM-Hierarchie außerhalb der übergeordneten Komponente zu rendern. Die Syntax lautet [ReactDOM.createPortal(child, container)].

Was bedeutet Portal in Reaktion?

Portals bietet eine gute Möglichkeit, untergeordnete Knoten in DOM-Knoten in der DOM-Hierarchie außerhalb der übergeordneten Komponente zu rendern. Portals 提供了一种很好的将子节点渲染到父组件外部 DOM 层级中的 DOM 节点中的方式。

语法:

ReactDOM.createPortal(child, container)
Nach dem Login kopieren

第一个参数(child)是任意可渲染的 React 子元素,例如一个元素,字符串或片断。第二个参数(container)是一个 DOM 元素。

通常从组件的 render 方法中返回的一个元素,该元素仅能装配到 DOM 节点中离其最近的父元素,但有时候也需要将其插入到 DOM 节点中的不同位置:

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

对于 portal 的一个典型用例是当父组件有 overflow: hiddenz-index

Syntax:
rrreee

Der erste Parameter (untergeordnetes Element) ist ein beliebiges renderbares untergeordnetes React-Element, z. B. ein Element, eine Zeichenfolge oder ein Fragment. Der zweite Parameter (Container) ist ein DOM-Element. Normalerweise handelt es sich um ein Element, das von der Rendermethode der Komponente zurückgegeben wird. Das Element kann nur zu seinem nächstgelegenen übergeordneten Element im DOM-Knoten zusammengesetzt werden. Manchmal ist es jedoch auch erforderlich, es an einer anderen Position im DOM-Knoten einzufügen:

rrreee
Für Ein typischer Anwendungsfall für Portal ist, wenn die übergeordnete Komponente einen overflow: versteckt- oder z-index-Stil hat und Sie möchten, dass ihre untergeordneten Komponenten visuell aus ihrem Container herausspringen. Zum Beispiel Dialogfelder, Hovercards und Tooltips. 🎜🎜🎜Verwandte kostenlose Lernempfehlungen: 🎜JavaScript🎜 (Video) 🎜🎜

Das obige ist der detaillierte Inhalt vonWas bedeutet Portal in Reaktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!