Pop-ups are common in the project business, and next we will implement 2 encapsulation of the Modal component based on ANTD. In this example we will implement a SelectCityDialog component that selects a city. The renderings are as follows:

The basic idea is:

(1) The display and hiding of the popover component is controlled by the variable visable inside the SelectCityDialog, and the value true or false is controlled by the value we pass in. That is, the parent component passes values to the SelectCityDialog to control display and hide

(2) Since we are going to open the popover externally (the parent component), we are going to define a variable externally — let’s call it VIS — that will be passed to the SelectCityDialog every time its value changes

(3) Inside the SelectCityDialog, we need to click cancel or confirm to close the popover, and we said that the display and hiding of the popover component is controlled by the variable visable inside the SelectCityDialog, and the value true or false is controlled by the value we pass in. Not the Visable of the SelectCityDialog itself, so when closing we need to let the value of the external VIS change, which causes the value passed by the SelectCityDialog to change. So what to do? Only one function can be passed to the component, and when closed, the function calling the parent component can change the value of the VIS in the parent component.

A bit of a round. But as long as we figure out this relationship, it’s ok.

(1) SelectCityDialog visible===> controls the SelectCityDialog display and hide

(2) The parent component vis=====> passes the value to SelectCityDialog =====> raises the visible change

(3) SelectCityDialog close =======> call the parent component’s function ====> set the parent component’s VIS to false, again raise the child component’s visible change next we implement code:

Import SelectCityDialog from ".. /.. /components/SelectCityDialog/index" import style from "./index.module.less" 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"}} />}> unavailable </Button> <SelectCityDialog title=" unavailable "vis={unavailable} operDialogFunc={operDialogFunc} > </SelectCityDialog> </div> ) } export default HouseStyleCopy the code

Next comes the selectCityDialog component:

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 className={style['list-rf']}></div> </div> <div className={style['recently-select']}> <div The className = {style [' list - lf ']} > recently choose < / div > < div className = {style [' list - rf ']} > < / div > < / div > < div > < / div > < / Modal >)} Note that we are listening for the passed variable vis in useEffect. So every time vis changes, we reassign cityVisable. This is basically the popover effect. Optimization: If the component is introduced directly. This way, the parent component finishes rendering while the child component has been mounted first. This can cause a problem if there is a problem with the data in the child component. The parent component will simply report an error and hang. We need a mechanism; After the parent component is rendered, the child component does not exist at all. That is, any error in the child component does not affect the parent component. So we need the child component to be completely destroyed initially. Make it render only when you click open; And the way to do it is very simple: "Visiable?" "Unavailable" vis={unavailable} operDialogFunc={operDialogFunc} > </SelectCityDialog>:nullCopy the code