React中如何为组件激活/未激活状态分别传入addToCart和removeFromCart函数

你可以直接在状态切换的逻辑里，根据当前Shop的状态判断调用对应的函数，修改后的代码如下：

import { useState } from 'react';
import { FaShoppingCart } from 'react-icons/fa';

function Product(props) {
  const [Shop, setShop] = useState(false);

  // 假设 addToCart 和 removeFromCart 是传入的函数或组件内部定义的函数
  const Shopped = () => {
    // 根据当前状态触发对应操作
    if (!Shop) {
      addToCart(); // 未激活状态，执行添加到购物车
      // 如果需要传递商品信息，比如 addToCart(props.product)
    } else {
      removeFromCart(); // 激活状态，执行从购物车移除
      // 同理可传参：removeFromCart(props.product)
    }
    // 切换状态
    setShop(!Shop);
  };

  return (
    <section onClick={Shopped}>
      {!Shop ? (
        <FaShoppingCart
          title="افزودن به سبد خرید"
          className="absolute right-0 m-4 cursor-pointer hover:text-green-700"
        />
      ) : (
        <FaShoppingCart className="absolute right-0 m-4 cursor-pointer text-green-700" />
      )}
    </section>
  );
}

export default Product;

逻辑说明： #

• 点击区域时，先检查当前Shop的状态：
  • 当Shop为false（未激活），调用addToCart()，再把状态切换为true（激活）
  • 当Shop为true（激活），调用removeFromCart()，再把状态切换为false（未激活）
• 优化了onClick的写法，直接绑定Shopped函数，避免每次渲染创建新的箭头函数

如果addToCart和removeFromCart是通过props传入的，记得确保组件接收这些函数参数。

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