React中如何从嵌套组件调用父组件useState方法关闭侧边栏

针对点击侧边栏菜单项自动关闭侧边栏的需求，由于当前组件嵌套层级仅3层，直接通过props逐层传递状态更新方法是成本最低、最符合React设计原则的实现方案，无需引入额外依赖。

修改逻辑 #

1. 持有open状态和setOpen方法的MenuSidebar组件，将关闭侧边栏的回调传递给直接子组件MenuSidebarItems
2. 中间层MenuSidebarItems接收回调后，透传给每一个渲染出来的MenuSidebarItem菜单项
3. 菜单项点击触发路由跳转时，同步调用传入的关闭回调，即可修改父组件状态收起侧边栏

对应修改后的代码 #

function MenuSidebar() {
    const [open, setOpen] = useState(false);

    return (
    <>
        <div className="logo" onClick={() => setOpen(true)}><p>LOgo</p><img className="dropdown" src="./assets/img/Dropdown.png" alt=">" /></div>
        {open && <>
            <div className="menuSidebar">
                <h3 className="backwardsSection" onClick={() => setOpen(false)}>🠔 Go Back</h3>
                <MenuSidebarItems onCloseSidebar={() => setOpen(false)} />
                <h3 className="sidebarTopics">Topics</h3>
                <TopicItems />
            </div>
            <div className="menuSidebarSpacing" onClick={() => setOpen(false)}></div>
        </>}
    </>
    );
}

function MenuSidebarItems({ onCloseSidebar }) {
    return (
        <>
        <MenuSidebarItem onClose={onCloseSidebar} leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Home</MenuSidebarItem>
        <MenuSidebarItem onClose={onCloseSidebar} leftIcon={ <HomeIcon /> }>Dashboard</MenuSidebarItem>
        <MenuSidebarItem onClose={onCloseSidebar} leftIcon={ <HomeIcon /> }>Shop</MenuSidebarItem>
        <MenuSidebarItem onClose={onCloseSidebar} leftIcon={ <HomeIcon /> } rightIcon={ <HomeIcon></HomeIcon> }>Projects</MenuSidebarItem>
        <MenuSidebarItem onClose={onCloseSidebar} leftIcon={ <HomeIcon /> }>About</MenuSidebarItem>
        </>
    );
}

function MenuSidebarItem(props) {
    const navigate = useNavigate();
    return (
        <button className="menuItem" onClick={() => {
            navigate("/" + props.children.toString().toLowerCase());
            props.onClose?.();
        }}>
            <span className="leftIcon">{props.leftIcon}</span>
            {props.children}
            <span className="rightIcon">{props.rightIcon}</span>
        </button>
    );
}

注：代码中props.onClose?.()使用了可选链语法，避免未传递onClose属性时抛出报错。
如果后续组件嵌套层级进一步加深（超过4-5层），逐层传递props会产生冗余的透传代码，此时可以考虑使用React Context或者状态管理库共享侧边栏状态，当前场景下props透传的可维护性更高。

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