ポップ層反応する学習

ポップ層は、前のDOMプログラミングは異なる反応し、私たちはしばしば唯一の父と息子、明らかに、ポップ間の転送制御を実現することができ、DOMでは、対応するノードに結合ポップアップイベントをすることができ、ことを知っているが、反応します上位層は、この関係に準拠していません。
ここでは、公式リアクト使用する必要があるポータルを

ポータルは、親レベルの場所に子ノードを超えて私たちを助けることができます
注：クラスを使用して公式文書、私はここで使用されるフックを反応させる
反応で

事前知識

フックは反応
useEffect反応ライフサイクルでありcomponentDidMount、componentDidUpdateならびにcomponentWillUnMount3つのフック関数の組み合わせ。

useEffect2つのパラメータがあります。
useEffect第2のパラメータは、対応する空の配列であるcomponentDidMount実行時間
useEffect二番目の引数は、いくつかの状態の等価物を含む配列状態の場合にのみ、この変更を実行します
useEffectこれは、同等の機能を返しcomponentWillUnMountサイクルを行います

実装手順

1.まず、ポップ層挿入DOMノードを選択し、ここで私はプロジェクトの公式ドキュメントを参照してくださいに分割されますapp-rootとmodel-root2、私は層が挿入されますポップmodel-rootノード

function App(){
    return(
        <React.Fragment>
            <div id={"app-root"}>
                <Router/>

            </div>
            
            <div id={"model-root"}></div>
        </React.Fragment>
    )
}

2.ポップアップ達成するために
私たちは私たちの子ノードとして貯蔵容器に公式文書、ミスターエルノードをたどると、そして実行ReactDOM.createPortal

ReactDOM.createPortal(child, container)

私たちは、選択したノードエルDOMノードを挿入し、DOMツリーへのその後のポータル要素、それではでフックを使ってみましょう私たちの最初のを必要とするcomponentDidMount挿入エルDOM段階

import React,{useState,useEffect} from 'react';
import './Model.css';
import ReactDOM from "react-dom";
import ExcelUtil from '../../utils/excelUtil';


function Content(props) {
    return(
        <div className={'cover'}>
            <button onClick={props.closeModel}>关闭</button>
            <input type='file' accept='.xlsx, .xls' onChange={(e)=>{ExcelUtil.importExcel(e)} }/>

        </div>
    )
}

function Model(props){
    const appRoot = document.getElementById('app-root');
    const modelRoot = document.getElementById('model-root');
    const [el,changEl] = useState(document.createElement('div'));

    //初始化工作
    useEffect(()=>{

        modelRoot.appendChild(el);

    },[])
    //清理工作
    useEffect(()=>{
        return ()=>{
            modelRoot.innerHTML="";

        }
    })
    return ReactDOM.createPortal((
        <Content closeModel={props.closeModel}/>
    ), el);
}

export default Model;

この子供のように要素は、私たちが望むDOM階層に表示されます

3.呼び出しページの我々のモデルの導入とは、関連するトリガイベントを定義し、方法は、親へのこれらの子ノードは、伝統的な価値観と違いはありません


function RegisterInUser() {
    const [isShowPop,changeShowPop] = useState(false);
    function handleInClick(){
        changeShowPop(!isShowPop);
    }
    return(
        <React.Fragment>
            {(isShowPop == true)?<Model isShow={isShowPop} closeModel={handleInClick}/>:null}


            <button className="ui-button ui-button-primary"  onClick={handleInClick}>导入人员</button>
            <button
                className="ui-button ui-button-primary outExcelBtn"
                type="primary"
                onClick={() => {ExcelUtil.exportExcel(initColumn, attendanceInfoList,"人员名单.xlsx")}}>
                导出表格
            </button>


        </React.Fragment>
    )
}

export default RegisterInUser;

事前知識

実装手順

最終的な効果は醜いです

おすすめ