如何渲染组件取决于角色

Posted 2023-02-23

【中文标题】如何渲染组件取决于角色

【英文标题】：How to render component depends role

【发布时间】：2019-10-24 07:06:47

【问题描述】：

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

如果来自 LocalStorage 的用户为 null，则应呈现 如果来自 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>
        );
    

【参考方案1】：

看组件好像可以是功能组件。

并且用户可以作为 prop 从渲染 NavBar 组件的父组件发送。

export default NavBar = (props) => 
if(!props.user)

   return (
   <div className ="navbar">
     <Logo/>
     <Menu/>
     <PanelOptions/>
    </div>
  )

else

 return null

【参考方案2】：

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

不，这无济于事。未观察到本地存储更改，不能作为重新渲染的原因。

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

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