ポータルと反応する再利用可能なモーダルコンポーネントの作成

4643 ワード
react reactportal modal テキストリンク

任意のWebアプリケーションのモデルの作成中に情報を表示する最良の方法やユーザーに別のページにユーザーをナビゲートせずに任意の機能です.
私たちはreactstrap モーダルを表示する場合.
主な要件は以下の通りです.
  • それはどこに私たちがしたい場所で使用するのに十分なジェネリック
    モーダルを表示する.
  • 入れ子になった子コンポーネントから/あるいは
    別モード
    • 番目の要件は、Portals 反応して.

    なぜポータル?
    我々のケースでは、私たちのモーダルをDOMツリーの最上部に表示したいが、入れ子になったモーダルの場合、実際のコンポーネントは異なるDOMノードにリンクされるかもしれません.

    ポータルとは
    反応では、ポータルを使用して、親階層のDOMノードの外側にある要素をレンダリングすることができます.一方、反応階層ではその位置を保持します.
    ポータルの典型的なユースケースは、親コンポーネントがオーバーフローしているときです.
    したがって、ポータルは私たちのためにmodalsを実装する最も良い方法です.
    十分な理論は実装を始める.
    ポータルを使用してモーダルを実装するには、「index . html」ファイルに移動し、ポータルをレンダリングできるDOMルートを追加します.私たちはID =“モーダルルート”を使っています.

    コード
    
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="modal-root"></div>


  </body>
    ポータルのレンダリングルートを追加すると、ポータルを使用してモーダルコンポーネントを作成できます.
    我々がモーダルを表示するためにreactstrapを使用しているので、モーダルタグは2つのパラメタをとります、そして、それが表示しなければならないならば、モードを指示するブール型の状態変数「isopen」と、モーダルの状態を変えるための関数使用であるトグル機能.

    コード
    import React from "react";
import { Modal, ModalBody } from "reactstrap";
import ReactDOM from "react-dom";

const CreateCustomModal = (props) => {
  if (props.isShowing) {
    return ReactDOM.createPortal(
      <>
        <Modal
          isOpen={props.isShowing}
          toggle={() => {
            props.setIsShowing(!props.isShowing);
          }}
        >
          <ModalBody>{props.children}</ModalBody>
        </Modal>
      </>,
      document.querySelector("#modal-root")
    );
  } else return null;
};

export default CreateCustomModal;
    上のコードで見ることができるように、ポータルを作成し、異なるDOM要素I . E .「モーダルルート」でレンダリングします.
    最終的には状態変数を作成しなければならない
    モーダルの開閉を処理します.ここで注意されるべきポイントは、モーダルがモーダルの開閉を扱う独自の状態変数を含んでいることを表示する各コンポーネントです.この方法では、オープンモードの中で別のモードを開くという問題を処理することができます.
    今、我々はモードで欲しいものを表示する最初の問題を解決するには
    モードを表示したいコンポーネントのCreateCustomModeコンポーネントをインポートします.状態変数「isshow」を作成し、createcustomModeコンポーネントに変数とそのコールバックを渡すと、CreateCustomModeの開き括弧と閉じ括弧の間のモードで表示するコンテンツを囲みます.

    コード
    import CreateCustomModal from "./CreateCustomModal";
import React, { useState } from "react";

const DisplayModal =()=> {
  const [isShowing, setIsShowing] = useState(false);
  return (
    <div >
      <h1>I am outside the Modal</h1>
      <CreateCustomModal isShowing={isShowing} setIsShowing={setIsShowing}>
        I am inside a Modal
      </CreateCustomModal>
    </div>
  );
}

export default DisplayModal;

    結論
    反応ポータルとリアクタクルを用いたカスタムモーダルコンポーネントを作成した
    Pythonクラス(抽象クラス)
    mysql第01章インストール