react中这种自定义antd弹窗组件该如何触发？_前端问题_站长_知道

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

已解决悬赏分：40 - 解决时间 2021-11-26 16:21

点赞 0反对 0举报 0 收藏 0

回答2

最佳

@a775696566

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

<Modal
  visible={visible}
>

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

<Button onClick={showModal} />

支持 0 反对 0 举报

2021-11-26 08:28

@lxe524

你的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>;
     
}

支持 0 反对 0 举报

2021-11-26 09:41