How to reference the modal of antd as a component?

A subcomponent of ChildModal, is actually an encapsulation of antd modal:

class ChildModal = ()=>{
    // ...
    return(
        <Modal
            visible={this.props.visible}
            width={500}
        >
            // ...
        </Modal>
    )
}

so how is the parent component referenced?

:
render(){
    return(
        <div>
            <ChildModal visible={visible} />
        </div>
    )
}

:
render(){
    return(
        <div>
            {
                visible && <ChildModal visible={true} />
            }
        </div>
    )
}
Nov.19,2021

both are fine.
I am used to using the second one, because it can completely unmount when it is not displayed.


is used to the first, because this ensures the stability of the DOM structure. It is recommended to use the first one for react to optimize


. For the second, when the visible changes, the unmount component will be forced, and the state changes in the component will disappear (for example, in the input box in AModal, the input data will be reset), which is not conducive to subsequent maintenance.
for the first kind, it is OK to force unmount to drop the component when the modal disappears. The modal of antd has a destoryOnClose attribute, which can be implemented

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b32550-2bdfb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b32550-2bdfb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?