Question

我想有条件地呈现一个自定义通知组件（不是100％知道它是如何工作的，它是由其他人编写的，并且使用了material-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 />}
</>)
}

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

1 个答案: