每次单击按钮时卸下并重新安装组件

Question

我想有条件地呈现一个自定义通知组件(不能100%确定它是如何工作的，它是由其他人编写的，它使用材料ui(。我希望每次单击按钮时都会出现此通知，但由于某种原因，通知组件在一段时间后自动隐藏后将停止重新出现，即使我单击了重新单击按钮，我也不完全确定这是如何工作的。

我只想知道是否有一种方法可以卸载然后重新安装这个自定义通知组件，这样它在每次单击按钮时都会得到新的呈现(这是不是不好的做法？(。这是我当前逻辑的简化版本：

const RandComponent = ()=>{
const [notifType, setNotifType] = useState(1);
const toggleNotif = ()=>{
setNotifType(!notifType);
}
const getNotif = ()=>{
return <Notification type={notifType}/>
}
return (<>
....
<button onClick={toggleNotif}>TOGGLE</button>
{getNotif(notifType)}
</>)
}

Answer 1

你可以这样做

const RandComponent = () => {
const [showNotification,setShowNotification] = useState(true):
const toggleNotificationHandler = () => {
setShowNotification(p => !p);
}
return (<>
<button onClick={toggleNotificationHandler}>TOGGLE</button>
{showNotification && <Notification />}
</>)
}