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

基于本地存储的反应策略警报

1 个答案: