react中这种自定义antd弹窗组件该如何触发？

Question

具体场景是：有一个公用弹窗组件（antd的Modal做的），显示隐藏是通过改变组件的state（visible:true显示/false隐藏）实现的。现在使用的时候用import引入该组件，引入后该如何改变组件的state使组件显示呢？比如点击按钮使组件显示

Answer 1

const [visible, setVisible] = useState(false);

<Modal
  visible={visible}
>

// 在某处更新visible, 比如：
showModal = () => {
  setVisible(true)
}

<Button onClick={showModal} />

Answer 2

你的Modal这个公共组件，要受外界的控制是否显示，应该使用props而不是使用自己的state。

父组件调用：不管你使用hooks还是class，isShow都是父组件的state,把他传给你的Modal组件。
<MyModal
  visible={isShow}
>

showModal = () => {
  setVisible(true)
}

<Button onClick={showModal} />

MyModal组件
function MyModal(props){
    if(!props.visible) return null;
    return <div>MyModal</div>;
     
}