React状态与Styled Components问题：汉堡菜单无法切换

核心问题定位 #

1. SideWrapper未接收状态参数：Sidebar组件中渲染SideWrapper时，没有将父组件传递的isOpen属性传入，导致Styled Components无法根据React状态切换样式。
2. 样式显隐逻辑错误：当前用margin-right控制位置时，初始隐藏的方向设置反了，无法正确让侧边栏移出视野。

修复步骤 #

1. 给SideWrapper传递isOpen属性

修改Sidebar组件，将isOpen传入SideWrapper：

// Sidebar组件
const Sidebar = ({isOpen, toggle}) => {
    return (
    <SideWrapper isOpen={isOpen}> {/* 新增：传递isOpen属性 */}
        <SideContainer>
            <SideTop>
                <SideLogo src={Logo} alt="logo" />
                <SideClose src={close} isOpen={isOpen} onClick={toggle} alt="close-logo"/>
            </SideTop>
            <SideList>
                <SideItem>HOME </SideItem>
                <SideItem>ABOUT US </SideItem>
                <SideItem>CREATE YOUR PLAN </SideItem>
            </SideList>
        </SideContainer>
    </SideWrapper>
    )
}

2. 调整SideWrapper的样式逻辑

推荐用transform实现显隐过渡（性能更优），替换原来的margin-right写法：

// Sidebar样式组件
import styled from 'styled-components';

export const SideWrapper = styled.div`
@media screen and (min-width: 768px) {
    display: none;
}
background: white;
position: absolute;
z-index: 999;
top: 0;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
transition: 0.3s ease-in-out;
display: flex;
// 根据isOpen状态控制侧边栏位置
transform: ${({ isOpen }) => (isOpen ? 'translateX(0)' : 'translateX(100%)')};
`

如果坚持用margin-right，需调整初始值为负：

margin-right: ${({ isOpen }) => (isOpen ? '0rem' : '-100%')};

3. 可选：修正状态日志的异步问题

setIsOpen是异步操作，直接console.log(isOpen)会打印更新前的旧值，若需要查看最新状态，可添加useEffect监听：

// Navigation组件
import React, { useState, useEffect } from 'react'

export const Navigation = () => {
    const [isOpen, setIsOpen] = useState(false);
    function toggle(){
        setIsOpen(!isOpen)
    }

    useEffect(() => {
        console.log(isOpen); // 此处打印最新状态
    }, [isOpen])

    return (
        <>
        <Sidebar isOpen={isOpen} toggle={toggle}/>
        <Nav isOpen={isOpen} toggle={toggle} />
    </>
    ) 
}

功能验证 #

完成上述修改后：

• 点击Nav组件中的汉堡图标，toggle函数切换isOpen为true，侧边栏从右侧滑入显示
• 点击Sidebar组件中的关闭图标，toggle函数切换isOpen为false，侧边栏滑出隐藏

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