React点击头像无法显示Logout弹窗问题求助

核心原因：CSS优先级冲突 #

你的.show__popup类优先级低于.nav__icons .profile .profile__actions这个复合选择器，导致添加show__popup后，display: block无法覆盖原选择器中的display: none。另外原.profile__actions使用的是flex布局，强行改成block会破坏弹窗的排版结构。

修复方案1：提升CSS类优先级（快速解决） #

修改你的CSS代码，让.show__popup的优先级与原选择器一致，并使用正确的display值：

.nav__icons .profile .profile__actions{
    position: absolute;
    top: 98%;
    left: 0;
    width: 150px;
    z-index: 10;
    padding: 15px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: var(--card-bg-01);
    line-height: 30px;
    cursor: pointer;
    display: none; /* 默认隐藏 */
}

/* 提升优先级，保持flex布局 */
.nav__icons .profile .profile__actions.show__popup{
    display: flex;
}

修复方案2：改用React状态控制（更符合React范式） #

直接操作DOM类名不是React的最佳实践，建议用useState状态来控制弹窗显示，同时解决点击弹窗内部误关闭的问题：

import React,{useState} from 'react'

const [showPopup, setShowPopup] = useState(false)
const toggleProfileActions = () => setShowPopup(!showPopup)

<div className='profile'>
    <motion.img 
        whileTap={{scale:1.2}} 
        src={userlogo} 
        alt=''
        onClick={toggleProfileActions}
    />
    <div 
        className={`profile__actions ${showPopup ? 'show__popup' : ''}`}
        onClick={(e) => e.stopPropagation()} {/* 阻止点击弹窗触发关闭 */}
    >
        { currentUser ? (
            <span onClick={(e) => {
                e.stopPropagation();
                logout(); // 点击Logout时不关闭弹窗
            }} >Logout</span> 
        ):( 
            <div>
                <Link to='/signup'>Sigup</Link>
                <Link to='/login'>Login</Link>
            </div>
        )}
    </div>
</div>

对应的CSS保持和方案1一致即可。

额外检查项 #

1. 确认profileActionRef.current不为null：在toggleProfileActions中添加console.log(profileActionRef.current)，如果输出null，检查组件渲染逻辑，确保ref绑定到了正确的元素上。
2. 检查父元素是否设置了position: relative：.profile元素需要设置position: relative，否则弹窗的position: absolute会相对于整个页面定位，可能超出视野范围。

内容的提问来源于stack exchange，提问作者apex