React练习 10：弹出层效果

Posted 2020-11-29 sx00xs

需求：点击按钮后弹出一个遮罩。点击 X 后关闭。

 

import React,{useState,useEffect} from ‘react‘;
import ReactDOM from ‘react-dom‘;
import ‘./index.css‘;


function Overlay(){
    const [isShow,setShow]=useState(false);
    return(
        <>
        <div id="overlay" className={isShow ? ‘show‘ : ‘‘} ></div>
        <div id="win" className={isShow ? ‘show‘ : ‘‘} >
            <h2>
                <span onClick={()=>setShow(false)} id="close">x</span>
            </h2>
        </div>
        <button onClick={()=>setShow(true)}>弹出层</button>
        </>
    );
}
ReactDOM.render(
    <Overlay/>,
    document.getElementById(‘root‘)
);