我遇到了麻烦。当我使用React创建注销功能时，出现了一个问题。
我的**“Auth”组件将状态和功能中的信息发送到“AuthMenu”组件。
但是，此代码中的注销函数<Btn onClick={logout}>Logout</Btn>不起作用。
当我检查“AuthMenu”**中的属性时，console.log(logout);显示了函数的代码。但是，不工作。
我是否编写了错误的代码？
。
Auth.js

import React, { Component } from 'react'
import { GetUser } from '../../controllers/auth'

class Auth extends Component {
    state = {
        info: {
            id: '',
            name: '',
            img: '/icons/user.png',
        },
    }

    handleSetAuth(data) {
        this.setState({
            info: {
                id: data.user_id,
                name: data.user_nickname,
                img: '/icons/user.png', 
            }
        });
    }

    handleDeleteAuth() {
        console.log("Logout Successful!");
        this.setState({
            info: {
                id: '',
                name: '',
                img: '/icons/user.png',
            }
        });
    }

    componentDidMount() {
        if (localStorage.getItem('tk') !== null){
            GetUser((data)=> {
                if (this.state.info !== data)
                this.handleSetAuth(data);
            });
        }
    }

    render() {
        return (
          <AuthMenu info={this.state.info} logout={this.handleDeleteAuth}></AuthMenu>
        );
    }
}

export default Auth

AuthMenu.js

import React from 'react'
import styled from 'styled-components'

...

const Btn = styled.button`
    position: relative;
    display: inline-block;
    float: right;
    width: 100px;
    height: 30px;
    font-size: 0.8rem;
    line-height: 30px;
    margin: 15px 0 15px auto;
    border-radius: 4px;
    border: 1px solid #eee;
    text-align: center;
    cursor: pointer;
    transition: .2s ${transition};
    ${noselect}

    &:hover,
    &:active {
        background-color: ${palette.gray8};
        color: white;
    }

    ${media.small} {
        width: 80px;
    }
`;

...

const AuthMenu = ({info, logout})=> {
    const token = localStorage.getItem('tk');
    if (token === null) {
        return (
          <Container>
            <IconImg src={info.img} alt="User" />
            <ContentWrap>
              <Btn>Login</Btn>
            </ContentWrap>
          </Container>
        )
    } else {
        return (
          <Container>
            <IconImg src={info.img} alt="User" />
            <ContentWrap>
              <Name>{info.name}</Name>
              <Btn onClick={logout}>Logout</Btn>
            </ContentWrap>
          </Container>
        );
    }
}

export default AuthMenu