оповещение о политике реагирования на основе локального хранилища

Question

Первое, что я новичок, чтобы отреагировать, и мне было поручено задание.

Моя задача:

Мне нужно создать один баннер для политик. Этот баннер будет иметь область действия браузера, что означает, что он будет доступен всегда, когда пользователь заходит на сайт, но если пользователь захочет закрыть этот баннер, он не появится до следующего сеанса.

Что я до сих пор делал? :

Я выбрал локальное хранилище и создал новый компонент. см. ниже код.

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import cx from 'classnames';
import styles from './policyAlert.scss';

class Alert extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            isActive: true
        };

        if (localStorage.getItem('policyState') === 'shown') {
            this.state = {
                isActive: false
            };
        }
    }

    hideAlert() {
        this.setState({
            isActive: false
        });
        localStorage.setItem('policyState', 'shown');
    }

    render() {
        if (this.state && this.state.isActive) {
            return (
                <div className={cx(styles.alertBottom)}>
                    <div className="alert alert-warning alert-dismissible myAlert-bottom" role="alert" style={{ marginBottom: 0 }}>
                        <button type="button" className="close" data-dismiss="alert" aria-label="Close" onClick={() => this.hideAlert()}>
                            <span aria-hidden="true">&times;</span>
                        </button>
                       Cookie related text...
                    </div>
                </div>
            );
        }

        return (null);
    }
}
export default Alert;

Теперь этот код отлично работает для меня и выполняет все необходимые требования, но Я не уверен, что это лучший способ для достижения такого рода функциональности.

Может кто-нибудь, пожалуйста, посмотрите на это и подтвердите? Спасибо!

Answer 1

Я не думаю, что возвращение null было бы хорошей идеей, но вместо этого, но загрузка или что-то там.

Мое предложение будет использовать componentDidMount() для получения данных из вашего местного хранилища вместо того, чтобы быть в constructor и использовать setState.

Обратите внимание, что localStorage - это синхронное действие, которое блокирует выполнение кода.

в конструкторе

this.state = {
  isActive: true
};

в componentDidMount

componentDidMount() {
  if (localStorage.getItem('policyState') === 'shown') {
    this.setState({
      isActive: false
    });
  }
}

Хорошим примером будет: https://hackernoon.com/how-to-take-advantage-of-local-storage-in-your-react-projects-a895f2b2d3f2