Как сделать компонент зависит от роли - PullRequest
Новая
       37

Как сделать компонент зависит от роли

0 голосов
/ 09 июня 2019

поэтому у меня есть конкретный код.Проблема в том, что это не работает в моменты - когда это должно.Мне нужно обновить страницу, чтобы она работала.

Если пользователь из 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>
        );
    }
}

Ответы [ 2 ]

1 голос
/ 09 июня 2019

Глядя на компонент, кажется, что он может быть функциональным компонентом.

И пользователь может быть отправлен как опора из родительского компонента, который рендерит компонент NavBar. 

export default NavBar = (props) => {
if(!props.user)
{
   return (
   <div className ="navbar">
     <Logo/>
     <Menu/>
     <PanelOptions/>
    </div>
  )
}
else
{
 return null
}
}
1 голос
/ 09 июня 2019

Должен ли я использовать другой метод реакции жизненного цикла?

Нет, это не поможет.Изменение локального хранилища не наблюдается, не может быть причиной повторного рендеринга.

В чем причина хранения пользовательских данных в локальном хранилище?Совместное использование данных между компонентами не должно быть [первичным].

Компоненты переопределяются при изменениях состояния или состояния.Вы можете передать некоторое значение (например, isLogged или просто user) из родительского состояния (где, вероятно, обрабатывается процесс входа в систему).Если логин обрабатывается в дочернем брате, который вам нужен поднятие состояния - один из основных методов реагирования.

...