将antd的modal包成一个组件如何引用？

Question

子组件为ChildModal, 其实就是对antd modal的封装：

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

那么父组件如何引用？

方案一：
render(){
    return(
        <div>
            <ChildModal visible={visible} />
        </div>
    )
}

方案二：
render(){
    return(
        <div>
            {
                visible && <ChildModal visible={true} />
            }
        </div>
    )
}

Answer 1

两种都可以。
我习惯使用第二种，因为这样可以在不显示的时候，彻底unmount掉。

Answer 2

习惯第一种， 因为这样可以保证DOM结构的稳定性。 有利于react做优化

Answer 3

建议使用第一种, 对于第二种, 在visible改变时会强制unmount组件, 组件内的state变化就会消失(比如在AModal里的输入框, 输入数据就会重置), 不利于后续维护
对于第一种来说, 想在modal消失时强制unmount掉组件也是可以的, antd的modal有destoryOnClose属性, 可以实现