Question

我想在标题的同一行上显示“注销”按钮，但仅当用户将其设置为“主页”组件时。

换句话说，我不想一直显示注销按钮，尤其是当用户位于登录屏幕时。我希望只有当他们成功登录并且在首页中时，它才会显示在标题的同一行上

我将如何实现？尝试执行此操作使我的头部受伤：（

以下是我到目前为止尝试过的内容。

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

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

1 个答案: