Reactは動的ポップアップウィンドウコンポーネントを実装します

インターフェース ModalProps {
  開く: ブール値;
  onClose?: () => void;
  子供はいますか?: いません;
}
定数モーダル = ({open.onClose, children}: ModalProps) => {
  開く場合
    null を返します。
  }
  createPortal を返します(<div>
    <div classname="modal-content">{子}</div>
    <div classname="modal-close-btn" onclick="{onClose}">x</div>
  </div>, ドキュメント.body);
};

定数App = () => {
  定数[open, setOpen] = useState(false);

  戻る （
    <div クラス名="app">
      <button onclick="{()" ==""> setOpen(true)}>モーダルを表示</button>
      <modal open="{open}" onclose="{()" ==""> setOpen(false)}>
        モーダルコンテンツ
      </モーダル>
    </div>
  );
};

const モーダル = ({ open, children, onClose }) => {
  const [active, setActive] = useState(false); // ポップアップウィンドウの存在サイクル if (!open && !active) {
    null を返します。
  }

  ReactDOM.createPortal() を返す
    <div クラス名="モーダル">
      <div classname="modal-content">{子}</div>
      <div classname="modal-close-btn" onclick="{onClose}">
        x
      </div>
    </div>,
    文書本文、
  );
};

const [aniClassName, setAniClassName] = useState(''); // アニメーションクラス

// 遷移実行完了リスニング関数 const onTransitionEnd = () => {
  // open が rue の場合、終了状態は 'enter-done' です
  // open が false でない場合、終了ステータスは 'exit-done' になります
  setAniClassName(open ? 'enter-done' : 'exit-done');

  // open が false の場合、アニメーションが終了するとポップアップウィンドウのライフサイクルも終了します if (!open) {
    アクティブに設定します(false);
  }
};

使用効果(() => {
  （開く）の場合{
    アクティブに設定します(true);
    アニクラス名を設定します('enter');
    // setTimeout はクラスを切り替えて遷移を起こすために使用されます setTimeout(() => {
      setAniClassName('enter-active');
    });
  } それ以外 {
    アニクラス名を設定します('終了');
    タイムアウトを設定する(() => {
      setAniClassName('exit-active');
    });
  }
}、 [開ける]）;

const モーダル = ({ open, children, onClose }) => {
  const [active, setActive] = useState(false); // ポップアップウィンドウの存在サイクル const [aniClassName, setAniClassName] = useState(''); // アニメーションクラス
  定数 onTransitionEnd = () => {
    setAniClassName(open ? 'enter-done' : 'exit-done');
    開く場合
      アクティブに設定します(false);
    }
  };

  使用効果(() => {
    （開く）の場合{
      アクティブに設定します(true);
      アニクラス名を設定します('enter');
      タイムアウトを設定する(() => {
        setAniClassName('enter-active');
      });
    } それ以外 {
      アニクラス名を設定します('終了');
      タイムアウトを設定する(() => {
        setAniClassName('exit-active');
      });
    }
  }、 [開ける]）;

  if (!open && !active) {
    null を返します。
  }

  ReactDOM.createPortal() を返す
    <div classname="{'modal" '="" +="" aniclassname}="" ontransitionend="{onTransitionEnd}">
      <div classname="modal-content">{子}</div>
      <div classname="modal-close-btn" onclick="{onClose}">
        x
      </div>
    </div>,
    文書本文、
  );
};

。入力 {
  不透明度: 0;
}
.enter-active {
  遷移: 不透明度 200 ミリ秒、イーズインアウト;
  不透明度: 1;
}
.enter-done {
  不透明度: 1;
}
。出口 {
  不透明度: 1;
}
.exit-active {
  不透明度: 0;
  遷移: 不透明度 200 ミリ秒、イーズインアウト;
}
.終了完了{
  不透明度: 0;
}

定数App = () => {
  定数[open, setOpen] = useState(false);

  戻る （
    <div クラス名="app">
      <button onclick="{()" ==""> setOpen(true)}>モーダルを表示</button>
      <modal open="{open}" onclose="{()" ==""> setOpen(false)}>
        モーダルコンテンツ
      </モーダル>
    </div>
  );
};

const モーダル = ({ open, onClose }) => {
  // http://reactcommunity.org/react-transition-group/css-transition/
  // プロパティは true/false で、true はアニメーションを展開し、false はアニメーションを閉じます。return createPortal(
    <csstransition in="{open}" timeout="{200}" unmountonexit="">
      <div クラス名="モーダル">
        <div classname="modal-content">{子供}</div>
        <div classname="modal-close-btn" onclick="{onClose}">
          x
        </div>
      </div>
    </csstransition>,
    文書本文、
  );
};