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>
    )
}
React.js antd
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

.

Previous: How should the dynamic binding css module style be written in vue?

Next: Will the introduction of images with relative paths in scss cause postcss failure?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu