ホームページ >ウェブフロントエンド >jsチュートリアル >反応におけるポータルとは何を意味しますか?

反応におけるポータルとは何を意味しますか?

coldplay.xixi
coldplay.xixiオリジナル
2020-11-17 14:02:263581ブラウズ

React の Portal は、親コンポーネントの外側の DOM 階層内の DOM ノードに子ノードをレンダリングするための優れた方法を提供します。構文は [ReactDOM.createPortal(child,container)] です。

反応におけるポータルとは何を意味しますか?

ポータル 子ノードを親コンポーネントの外側の DOM 階層内の DOM ノードにレンダリングする優れた方法を提供します。

構文:

ReactDOM.createPortal(child, container)

最初のパラメータ (子) は、要素、文字列、フラグメントなどのレンダリング可能な React 子要素です。 2 番目のパラメータ (コンテナ) は DOM 要素です。

通常は、コンポーネントの render メソッドから返される要素です。この要素は、DOM ノード内の最も近い親要素にのみアセンブルできますが、DOM ノード内の別の位置に挿入する必要がある場合もあります。

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

ポータルの一般的な使用例は、親コンポーネントに overflow: hidden または z-index スタイルがあり、その子コンポーネントがそこから視覚的に飛び出す必要がある場合です。 。 容器。たとえば、ダイアログ ボックス、ホバーカード、ツールチップなどです。

関連する無料学習の推奨事項: JavaScript (ビデオ)

以上が反応におけるポータルとは何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。