React中如何正确传递状态控制购物车侧边抽屉的开闭

• 状态体系冗余割裂：父组件已经维护了用于控制抽屉开合的isOpen状态（加购时设为true触发弹出），但CartDrawer组件内部又独立定义了一份完全没有同步关联的isOpen本地状态，两套状态互不影响。
• 渲染逻辑与状态修改逻辑错位：抽屉的样式判断（是否添加open类名弹出）完全依赖父组件传入的props.toggleOpen值，但点击关闭按钮时，触发的却是子组件内部的setIsOpen方法——修改的是一个根本没有参与渲染判断的孤立状态，自然无法触发抽屉关闭。
• 不符合React单向数据流规则：作为受控组件，子组件应该完全接收父组件传入的状态值，所有状态变更动作需要通过回调函数告知父组件完成更新，不能自行维护和父组件重复的同一份状态。

这也是为什么目前打开抽屉的流程可以正常运行：加购时修改的是父组件的状态，能正确同步到props影响渲染；但关闭流程失效，是因为修改的是子组件内部的孤立状态，完全不改变父组件传入的props值，所以无法触发抽屉收起。

核心思路是删除子组件冗余的内部状态，把状态更新的权限完全交还给父组件，子组件只负责接收参数展示、通过回调传递交互动作：

1. 父组件给CartDrawer额外传入一个关闭回调props，用来触发父组件更新isOpen状态为false
2. 删除CartDrawer内部所有和开合状态相关的冗余state
3. 把关闭按钮的点击事件，绑定为调用父组件传入的关闭回调，不再操作子组件内部的孤立状态

修正后代码示例 #

父组件核心逻辑：

const [isOpen, setIsOpen] = useState(false);

const addToCartHandler = async (id) => {
  setIsOpen(true);
  // 原有加入购物车业务逻辑保留
}

<CartDrawer 
  toggleOpen={isOpen} 
  onClose={() => setIsOpen(false)}
/>
<Button
  variant="primary"
  onClick={() => addToCartHandler(id)}
>
  Add to Cart
</Button>

修正后的CartDrawer组件逻辑：

const CartDrawer = (props) => {
  // 删除内部冗余的isOpen本地状态，不再维护独立的开合逻辑
  const closeNavHandler = () => {
    // 点击关闭时直接触发父组件传入的回调，通知父组件更新状态
    props.onClose();
  };

  return (
    <div
      id="mySidenav"
      className={props.toggleOpen ? "sidenav open" : "sidenav"}
    >
      <a
        className="closebtn"
        onClick={closeNavHandler}
      >
        &times;
      </a>
    </div>
  );
};

export default CartDrawer;

补充说明：这类可复用的抽屉/弹窗组件，要么完全做非受控模式（所有开合逻辑都在组件内部维护，父组件完全不干预），要么完全做受控模式（状态完全由父组件管理，组件只负责接收props展示、通过回调传递交互），绝对不能两边各存一份同含义的状态，否则一定会出现状态不同步的bug。

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