React开发中如何传递cart props且不破坏侧边栏toggle功能

API 探路者

2026-10-20

代码需要接收对应prop来控制侧边栏切换，但我传入cart相关props后，toggle功能就失效了。

问题根因与修复方案

你提供的代码存在两处基础语法错误，是toggle功能失效的核心原因，和cart props本身无直接关联：

函数式组件入参写法错误：函数式组件仅接收唯一的props对象作为入参，你当前拆分了两个入参({currentUser, hidden, signOutStart}, props)，第二个props不会接收到任何组件传入的属性，包括你新增的cart参数、侧边栏切换用的handleDrawerToggleClick都会丢失。
函数式组件错误使用this.props：函数式组件没有组件实例，不存在this指向，你调用this.props.handleDrawerToggleClick本质是读取undefined的属性，点击事件根本无法触发。

修复后的代码示例

// 用...rest 接收所有未显式解构的props，也可以将cart、handleDrawerToggleClick直接写到解构列表中
const Toolbar = ({currentUser, hidden, signOutStart, cart, handleDrawerToggleClick, ...rest}) => {
    return (
        <header className='toolbar'>
            <nav className='toolbar_navigation'>
                <div className="toolbar_toggle-button">
                    {/* 直接使用解构出来的切换方法，cart按需传递给子组件即可 */}
                    <DrawerToggleButton click={handleDrawerToggleClick} cart={cart}/>
                </div>
                {/* 其余原有逻辑保持不变 */}
            </nav>
        </header>
    )
}

如果不需要显式解构对应属性，也可以直接通过剩余参数rest调用属性，无需单独写到解构列表中。