如何在React项目中从其他组件触发打开Material UI的Drawer组件

问题根源 #

你给Header组件传递的setCartOpen是挂载在props对象上的属性，而函数组件的第二个入参只有转发ref时才会使用，你当前的写法无法正确获取到父组件传下来的状态修改方法，所以触发无效。

最简解决方案 #

二选一即可：

方案1：直接从props调用方法 #

修改Header组件内的按钮点击逻辑：

// 删掉原来入参里的setCartOpen，所有自定义传参都在第一个props对象里
const Header = (props) => {
// 其他逻辑省略
<button onClick={() => props.setCartOpen(true)}>
  <Badge badgeContent={props.countCartItems}/>
</button>
// 其他逻辑省略
}

方案2：解构props获取方法 #

在Header组件的入参位置直接解构出需要的属性，写法更简洁：

// 可按需把其他你用到的props属性一起解构
const Header = ({ countCartItems, setCartOpen }) => {
// 其他逻辑省略
<button onClick={() => setCartOpen(true)}>
  <Badge badgeContent={countCartItems}/>
</button>
// 其他逻辑省略
}

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