未登录效果

来源：简书项目
效果：未登录弹出 warning,并且在几秒后后路由重新跳转

这个项目使用的 styled-component，使用 js 编写 css 文件

1	this.props.loginStatus?<WriteWrapper><WriteWrapper>:<Alter ref={(alter)=>this.alter=alter}>继续登录前请登录或注册.</Alter>

loginStatus 表示登录状态，
登录时显示写文章组件 WriteWrapper
未登录时显示弹框组件
Alter 采用固定定位，类似 js 里面的 alter

export const Alter=styled.div`
  position:fixed;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    padding:8px 28px;
    border:2px solid #ec7259;
    border-radius:5px;
    background:#fff;
    box-shadow:1px 0 3px 0px #fff;
`

最重要的是采用 ref 来标记元素，相当于 js 里面的 document.getElementById,元素挂载后可以将元素放到 this 里面，就可以随时修改元素属性

在页面挂载后，如果未登录就启动定时器，并且设置固定时间后弹窗隐藏，路由跳转
记得组件销毁时，清除定时器

componentDidMount(){
     if(!this.props.loginStatus)
     this.timerID=setTimeout(()=>{this.alter.style.display='none';window.location.href='/login';},1500)
}
componentWillUnMount() {
    clearInterval(this.timerID);
  }