Javascript 基于本地存储的react策略警报

第一件事我是新来的，我被分配了一项任务

我的任务：

我必须为政策创建一个横幅。此横幅将具有浏览器级别的作用域，这意味着一旦用户访问站点，它将始终可用，但如果用户选择关闭该横幅，它将在下一个会话之前不会显示

到目前为止我做了什么

我选择使用本地存储并创建了新组件。请参阅下面的代码

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;

import React，{Component}来自'React'；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“类名称”导入cx；
从“/policyAlert.scss”导入样式；
类警报扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
是的
};
if（localStorage.getItem（'policyState'）='show'）{
此.state={
isActive:错误
};
}
}
希德勒特（）{
这是我的国家({
isActive:错误
});
setItem（'policyState'，'Showed'）；
}
render（）{
if（this.state&&this.state.isActive）{
返回(
this.hideAlert（）}>
&时代；
与Cookie相关的文本。。。
);
}
返回（空）；
}
}
导出默认警报；

现在，这段代码对我来说运行良好，并完成了所有必要的要求，但我不确定这是实现此类功能的最佳实践。

---

有人能调查一下并核实一下吗？谢谢

我不认为return

null

是一个好主意，而是一个加载之类的东西

我的建议是使用

componentDidMount（）

从本地存储中获取数据，而不是使用

constructor

并使用

setState

请注意，

localStorage

是一个同步操作，它将阻止代码执行

在构造函数中

this.state={
是的
};

组件安装中的

componentDidMount（）{
if（localStorage.getItem（'policyState'）='show'）{
这是我的国家({
isActive:错误
});
}
}

---

一个很好的例子是：

这可能比一次不起作用更适合，当用户刷新页面时，构造函数会将标志更新为true，并且不会调用componentDidMount（），所以，即使用户之前已经清除了策略警报，他/她也会收到该警报。@Bharat在这种情况下，我建议将其包装在组件中，并对其进行条件渲染，通过道具传递必要的数据