主页 / 问题 / 1499629
Accepted
Marie
Asked:2023-02-25 00:27:17 +0000 UTC2023-02-25 00:27:17 +0000 UTC

单击 React 按钮后不再显示组件/即使在刷新后

  • 772

如何在 React 中制作，以便当您单击 Notification 组件中的按钮时 - 即使页面刷新也不再显示？

 {!notificationHidden &&
     (
         <Notification
             onClose={handleCalculationNotificationClose}
         >
             <Button onClick={handleCalculationNotificationClose}>
             ОК!
             </Button>
         </Notification>
     )
}

.

const [notificationHidden, setNotificationHidden] = useState(false);
const handleCalculationNotificationClose = () => {
    setNotificationHidden(true);
};
reactjs

1 个回答

  1. Best Answer

    为了让应用程序在启动时检查该值，您可以使用localStorage。

    在您的示例中，可以通过如下更改代码来实现所需的行为

    const [notificationHidden, setNotificationHidden] = useState(!!localStorage.getItem('notification'));
const handleCalculationNotificationClose = () => {
    setNotificationHidden(true);
    localStorage.setItem('notification', '1');
};

    创建组件时，将检查存储中的值并将其转换为boolean. 有则有true，无则无false。

    当函数触发时，将handleCalculationNotificationClose写入一个值localStorage，当转换为布尔值时，将返回true，这将阻止组件渲染Notification。

    • 1

相关问题