如何渲染组件取决于角色

Question

所以我有一个特定的代码。问题是它暂时不起作用——当它应该起作用的时候。我需要刷新页面才能正常工作。

如果来自 LocalStorage 的用户为空，则应该呈现如果来自 LocalStorage 的用户存在，则不应呈现

它可以工作，但我怎样才能改进它以在登录后（而不是在刷新页面后）工作？

我应该使用其他反应生命周期方法吗？

class Navbar extends React.Component {

    constructor(props){
        super(props)
        this.state ={
            user: null
        }
    }

    componentDidMount(){
        const user = JSON.parse(localStorage.getItem('user'));
        this.setState({
            user: user
        },
        console.log('test'+ this.state.user)
        )
    }

    render(){
        return(
            <div>
            { !this.state.user ?
            <div className ="navbar">
                <Logo/>
                <Menu/>
                <PanelOptions/>
            </div>
             : null}
             </div>
        );
    }
}

Answer 1

Should I use other react lifecycle method?

不，这没有用。未观察到本地存储更改，不能成为重新渲染的原因。

将用户数据存储在本地存储的原因是什么？组件之间共享数据不应该是[主要]。

组件在道具或状态变化时重新渲染。您可以从父状态（可能处理登录过程）传递一些值（f.e。isLogged 或简单地 user）。如果登录是在您需要的兄弟姐妹中处理的 lifting state up - 基本反应技术之一。

Answer 2

看组件好像是功能组件

并且可以从呈现 NavBar 组件的父组件将用户作为 prop 发送。

export default NavBar = (props) => {
if(!props.user)
{
   return (
   <div className ="navbar">
     <Logo/>
     <Menu/>
     <PanelOptions/>
    </div>
  )
}
else
{
 return null
}
}

如何渲染组件取决于角色

How to render component depends role

components

rendering

roles

reactjs