如何仅在特定组件上显示我的按钮？

Question

我想在标题的同一行显示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;

Answer 1

你可以试试下面的东西。您不需要处理函数和修改状态。

你可以简单地在下面做

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修改状态时，状态值仅在渲染后更新，因此您无法直接检查立即修改该值。