Больше не показывать компонент после нажатия на кнопку React / даже после обновления

Рейтинг: 0Ответов: 1Опубликовано: 24.02.2023

Как сделать в Реакт так, чтобы при нажатии на кнопку в компоненте Notification - он больше не показывался даже при обновлении страницы?

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

.

const [notificationHidden, setNotificationHidden] = useState(false);
const handleCalculationNotificationClose = () => {
    setNotificationHidden(true);
};
reactjs localstorage
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Для того, что бы приложение проверяло значение при запуске, можно использовать localStorage.

В вашем примере, желаемого поведения можно достичь, изменив код следующим образом

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

При создании компонента, будет проверяться значение в хранилище и преобразовываться к типу boolean. Если что то есть, будет true, ничего нет, будет false.

При срабатывании функции handleCalculationNotificationClose в localStorage будет записано значение, которое при преобразовании к bololean вернет true, что предотвратит рендер компонента Notification.