我想在标题的同一行显示Logout按钮,但仅当用户将其设置为Home组件时。
换句话说,我不想一直显示注销按钮,尤其是当用户在登录屏幕时。我希望它只在他们成功登录并且在家中时显示在标题的同一行
我怎么做到这一点?我试图让这项工作受伤:(
以下是我到目前为止所尝试过的内容。
import React, {Component} from 'react';
import classes from './Title.css';
import LogoutButton from '../../containers/LogoutButton/LogoutButton';
import Home from '../../components/Home/Home';
class Title extends Component {
constructor(props) {
super(props);
this.state = {
show: false,
showLogoutButton: true
};
}
showButton() {
this.setState({show: true});
if(this.state.show) {
return <LogoutButton/>;
} else {
return null;
}
}
render() {
return(
<div>
{ this.state.showLogoutButton ? this.showButton : null }
<h1 className={classes.Title}>Pick Ups</h1>
</div>
);
}
}
export default Title;
你可以试试下面的东西。您不需要处理函数和修改状态。
你可以简单地在下面做
import classes from './Title.css';
import LogoutButton from '../../containers/LogoutButton/LogoutButton';
import Home from '../../components/Home/Home';
class Title extends Component {
constructor(props) {
super(props);
this.state = {
showLogoutButton: this.props.authenticated
};
}
render() {
const { showLogoutButton } = this.state;
return(
<div className="row" style={{"display" :"flex"}}>
{ showLogoutButton && <LogoutButton/>}
<h1 className={classes.Title}>Pick Ups</h1>
</div>
);
}
}
export default Title;
注意:使用setState修改状态时,状态值仅在渲染后更新,因此您无法直接检查立即修改该值。