react hooks+antd实现一个弹窗2次封装

弹窗在项目业务中很常见，接下来我们将基于antd的Modal组件实现2次封装。比如我们这个组件就叫SelectCityDialog。

基本思路就是：

（1）弹窗组件的显示和隐藏由SelectCityDialog内部一个变量visable来控制，而这个值为true或者false则是由我们传入的值来控制。也就是说父组件传值给SelectCityDialog控制显示和隐藏

（2）由于我们要在外部（父组件）来打开这个弹窗，所以我们要在外部定义一个变量比如我们就叫vis，它每次值的变化则会传递给SelectCityDialog

（3）在SelectCityDialog内部，我们要点击取消或确定会关闭弹窗，而我们说过弹窗组件的显示和隐藏由SelectCityDialog内部一个变量visable来控制，而这个值为true或者false则是由我们传入的值来控制，而不是SelectCityDialog本身的visable来更改，所以关闭的时候我们需要让外部vis的值更改，进而引发SelectCityDialog传递过来的值发生更改。那怎么办呢？只能给组件传递一个函数，在关闭的时候让调用父组件的函数更改父组件内的vis的值更改，这样就能达到目的。

有点绕。但是只要我们理清楚这样一个关系就可以了。

（1）SelectCityDialog内部的visible===>控制SelectCityDialog显示、隐藏

（2）父组件的vis=====>传值给SelectCityDialog =====>引发visible

（3）SelectCityDialog关闭=======>调用父组件的函数====>设置父组件的vis为false

父组件
import SelectCityDialog from "../../components/SelectCityDialog/index"


function HouseStyle(props){
    const [visiable,setVisiable]=useState(false)
    const operDialogFunc=(flag)=>{
        setVisiable(flag)
    }
 return(
    <div>

    <Button size="large"
                            onClick={()=>operDialogFunc(true)}
                            icon={<IconFont type="icon-dingwei" style={{fontSize:"18px",color:"#ff8c00"}} />}>
                        上海
                    </Button>
<SelectCityDialog title="设置常用城市" vis={visiable} operDialogFunc={operDialogFunc}></SelectCityDialog>

    </div>
)
}
export default HouseStyle

接下来是selectDialog组件

export default function SelectCityDialog(props){

    let {title,operDialogFunc,vis}=props;
    const [cityVisable,setCityVisable]=useState(false)
    useEffect(()=>{
        console.log("vis:",vis)
        setCityVisable(vis)
    },[vis])
    return(
        <Modal
            title={title}
            centered
            visible={cityVisable}
            onOk={() =>operDialogFunc(false)}
            onCancel={() => operDialogFunc(false)}
            width={1000}
      >
        <div className={style['cur-locate']}>
            <div className={style['list-lf']}>当前定位</div>
            <div className={style['list-rf']}></div>
        </div>
        <div className={style['recently-select']}>
            <div className={style['list-lf']}>最近选择</div>
            <div className={style['list-rf']}></div>
        </div>
        <div></div>
      </Modal>
    )
}