Передайте имя пользователя из компонента входа в компонент домашней страницы
Если у меня есть такой компонент страницы входа в систему ...
class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: ""
};
и я хочу получить доступ к этому имени пользователя на домашней странице, чтобы показать пользовательскую информацию с помощью выборки, как мне это сделать?
class AccountItem extends Component {
constructor(props) {
super(props);
this.state = {
username : // How to get the same field as Login username here?
};
}
Я изучу это
Будет ли работать передача его в качестве реквизита для этого компонента?
@ Curious13 Я не совсем понимаю, как бы я это сделал
Ответы 1
Лучший способ справиться с этим - использовать React.createContext, если у вас есть Реагировать 16.3, обновлять свое состояние на уровне приложения или иметь систему управления состоянием, такую как Redux, для отслеживания вашего текущего имени пользователя.
Example with React.createContext which I highly recommend using if you don't have a state management
// This is where you have your routes etc.
import * as React from 'react';
const UsernameContext = React.createContext('');
class App extends Component {
constructor(props) {
super(props);
this.state = { username: '' };
}
onUsernameChange = (username) => {
this.setState({
username: username
});
}
render() {
<UsernameContext.Provider value = {this.state.username}>
<Switch>
<Route exact path = "/" render = {Home} />
<Route path = "/login" render = {()=><LoginPage onUsernameChange = {this.onUsernameChange}/>
</Switch>
</UsernameContext.Provider>
}
}
class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: ""
};
}
onSubmit = () => {
// This is pseudo code so you want to handle login somewhere
// when that is done you can call your onUsernameChange
this.props.onUsernameChange(this.state.username);
};
...
}
class AccountItem extends Component {
render() {
return (
<UsernameContext.Consumer>
{(username) => {
// you have username in props
}}
</UsernameContext.Consumer>
)
}
Ниже приведен простой пример без Redux или React.createContext
// This is where you have your routes etc.
class App extends Component {
constructor(props) {
super(props);
this.state = { username: '' };
}
onUsernameChange = (username) => {
this.setState({
username: username
});
}
render() {
<Switch>
<Route path = "/login" render = {()=><LoginPage onUsernameChange = {this.onUsernameChange}/>
<Route path = "/account" render = {() => <AccountItem username = {this.state.username} />} />
</Switch>
}
}
class Login extends Component {
constructor(props) {
super(props);
this.state = {
username: ""
};
}
onSubmit = () => {
// This is pseudo code so you want to handle login somewhere
// when that is done you can call your onUsernameChange
this.props.onUsernameChange(this.state.username);
};
...
}
class AccountItem extends Component {
render() {
this.props.username // you have username in props
В итоге я дал своему маршрутизатору имя пользователя в его состоянии, затем передал его Home и снова передал AccountItem. Вероятно, это плохой дизайн, но пока он работает
Еще вы можете использовать React.createContext, если вы используете 16.3. Я могу опубликовать простой пример того, как это сделать. Что должно быть лучшим способом справиться с этим случаем, поскольку App -> Home -> AccountItem
Это не нужно чем ты @KennethTruong
Вы можете сохранить имя пользователя в localstorage после входа в систему, а затем получить его в компоненте AccountItem.