TIL_67_Portal

21257 ワード
React Portal テキストリンク
Learn React Portal In 12 Minutes By Building A Modal
上のビデオに基づいて作られています.
企業提携4日目.プロジェクトを一緒に行う開発者は、なぜポータルサイトを使うのかを理解することが重要だと話しています.ジュンウがシェアしてくれたおかげで上の動画が見れました

一目で目立つ問題が見つかる.
モードウィンドウが表示されると、他にオクルージョンがないことを確認できます.ハーモニーを見てみましょう
// App.js
import React, { useState } from "react";
import Modal from "./Modal";

const BUTTON_WRAPPER_STYLES = {
  position: "relative",
  zIndex: 1,
};

const OTHER_CONTENT_STYLES = {
  position: "relative",
  zIndex: 2,
  backgroundColor: "red",
  padding: "10px",
};

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <div style={BUTTON_WRAPPER_STYLES}>
        <button onClick={() => setIsOpen(true)}>Open Modal</button>

        <Modal open={isOpen} onClose={() => setIsOpen(false)}>
          Fancy Modal
        </Modal>
      </div>

      <div style={OTHER_CONTENT_STYLES}>Other Content</div>
    </>
  );
}
// Modal.js
import React from "react";

const MODAL_STYLES = {
  position: "fixed",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  backgroundColor: "#FFF",
  padding: "50px",
  zIndex: 1000,
};

const OVERLAY_STYLES = {
  position: "fixed",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  backgroundColor: "rgba(0, 0, 0, .7)",
  zIndex: 1000,
};

export default function Modal({ open, children, onClose }) {
  if (!open) return null;

  return (
    <>
      <div style={OVERLAY_STYLES} />
      <div style={MODAL_STYLES}>
        <button onClick={onClose}>Close Modal</button>
        {children}
      </div>
    </>
  );
}
上のコードを見て、App.jsファイルでは、OTHER CONTENT STYLESがzIndex 2に与えられていることがわかります.
次のモデルもjsファイルでは、1000個のzIndexがMODAL STYLESに提供されていることがわかります.どうしてモデルのzIndexはもっと高いのに、隠していないのですか?
理由はModelAppjsファイルを継承しているからです.
モードはAppです.jsコードからdivに囲まれていることがわかります.いくらModelの高いzIndexを与えても、サブコンポーネントは親コンポーネントを上書きすることはできません.他のコンテンツzIndexよりも低いBUTTONWRAPPER STYLESはOTHER CONTENT STYLESに隠されているだけです.
ポータルサイトを通じてこの問題を解決します.
// index.html
<body>
    <div id="root"></div>
    <div id="portal"></div>
  </body>
</html>
index.htmlのルートの下にportalというdivを作成します.
// Modal.js
import React from "react";
import ReactDom from "react-dom";
//  ReactDom을 import 를 해주고

const MODAL_STYLES = {
  position: "fixed",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  backgroundColor: "#FFF",
  padding: "50px",
  zIndex: 1000,
};

const OVERLAY_STYLES = {
  position: "fixed",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  backgroundColor: "rgba(0, 0, 0, .7)",
  zIndex: 1000,
};

export default function Modal({ open, children, onClose }) {
  if (!open) return null;

  return ReactDom.createPortal(
    //  리턴 옆에 ReactDom.createPortal 를 선언.
    <>
      <div style={OVERLAY_STYLES} />
      <div style={MODAL_STYLES}>
        <button onClick={onClose}>Close Modal</button>
        {children}
      </div>
    </>,
    document.getElementById("portal")
  //  document.getElementById("portal") 선언.
  );
}

ああ解決!
リアクション-構成部品を親構成部品の外部DOMにレンダリングします。
冷たい飲み物
[白俊]1966号:プリンタキュー