如何渲染组件取决于角色答案

【问题标题】：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>
        );
    }
}

【问题讨论】：

标签： reactjs components rendering roles

【解决方案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 的兄弟孩子中处理的 - 基本反应技术之一。

【讨论】：