Установить состояние из другого компонента React js
У меня в index.js есть следующая структура:
<MyAppBar // + properties/>
<Route path = {path} component = {Login}/>
MyAppBar.js
class MyAppBar extends React.Component {
state = {
auth: false,
anchorElement: null
};
handleLogin(){
this.setState({auth:true});
}
//another code
//end component
export default withStyles(styles)(MyAppBar)
Я хочу обновить флаг авторизация состояния MyAppBar до правда из обработчика действий компонента Авторизоваться (т.е. handleLogin), но я не знаю как.
Я пробовал импортировать MyAppBar (все компоненты) на страницу Авторизоваться, но там написано, что
MyAppBar.handleLogin();
это не функция ... Спасибо!
Спасибо!
в таких сценариях лучше использовать redux, так как это упрощает взаимодействие между компонентами.
Да, это то, что я собираюсь сделать. Большое спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Логин должен быть дочерним компонентом MyAppBar. Затем вы можете передать функцию handleLogin в качестве реквизита для входа в систему.
Привет, у плаката проблемы, потому что компоненты не могут быть дочерними.
Вам следует использовать REDUX.
В основном потому, что он позволяет вам иметь состояние, в котором любой компонент может читать или синхронизироваться с ним.
Я редко использую response state / setState.
В большинстве случаев состояние редукции можно изменить / посмотреть.
Вот что я собираюсь сделать! Спасибо!
в таких сценариях лучше использовать redux, так как это упрощает обмен данными между компонентами. В противном случае, если вы хотите пойти тяжелым путем, создайте родительский компонент, который будет обертывать как логин, так и MyAppBar.
class ParentComp extends Component{
constructor(props){
super(props);
this.state = {
isLoggedIn:false
};
this.setLoginState=this.setLoginState.bind(this);
}
setLoginState(value){
this.setState({isLoggedIn:value});
}
render(){
return(<div>
<MyAppBar isLoggedIn = {this.state.isLoggedIn} />
<Route path = {path} render = {props=><Login {..props} setLoginState = {this.setLoginState}/>}/>
</div>);
}
}
в вашем LoginComponent вызовите метод setLoginState
this.props.setLoginState(true);
и в вашем компоненте myappbar используйте свойство isLoggedIn для условного рендеринга
renderLogin(){
if (this.props.isLoggedIn){
// return loggedin jsx
}else{
return the alternative
}
}
Я собираюсь использовать Redux, но большое спасибо за это альтернативное решение.
Я не думаю, что для этой простой парадигмы вам нужно будет проходить через все хлопоты по настройке редукции (я люблю Redux, но иногда нам не нужно его использовать)
Вот как вы могли бы реализовать это с новым context.
It's farily simple and nice to use. Check it here Let me know if that isn't clear.
Рад помочь :)
хорошее решение. Чисто и просто
Спасибо! Мне очень нравится этот новый API и то, как все это сочетается друг с другом :)
О, спасибо @KhurshidAnsari за ваш комментарий, я понятия не имею, почему URL запутался !!! Только что обновил :)
Вы можете сделать это с помощью нового API контекста React здесь. По сути, вам следует обернуть ваш
MyAppBarвProvider, а вашLogin- вConsumer. Дайте мне знать, если это недостаточно ясно.