如何有条件地链接两个反应组件的state

Question

我正在用 React 制作一个简单的网站，它有两个类似的按钮。 每个like 按钮都在不同的Card组件中，并且这两个都在父Projects组件中。 我希望网站上的总点赞数不超过 10。所以按钮一个注册了 4 个赞，第二个按钮注册的赞数不能超过 6 个。 这是我的初始代码，它只为两个卡组件提供相同的 state

import styles from "./Card.module.css";
const Card = ({ img, title, description, ytLink, children}) => {
  return (
    <div className={styles.card}>
      <img className={styles["card-media"]} alt={img.alt} {...img} />
      <div className={styles["card-details"]}>
        <h2 className={styles["card-head"]}>{title}</h2>
        <p>{description}</p>
        <div className={styles.buttons}>
          <a
            key={ytLink}
            className={styles["card-action-button"]}
            href={ytLink}
            target="_blank"
          >
            Watch
          </a>
          {children}
        </div>
      </div>
    </div>
  );
};

export default Card;

import Card from "../Card";
import styles from "./Projects.module.css";
import React, { useState, useEffect } from "react";
import Likebutton from "../Like";
const Projects = ({ projects }) => {
  

  
  const [likesCount, setLikesCount] = useState(0);
  const addLike =() => {
    const updateLikes = likesCount + 1;
    updateLikes < 10 ? setLikesCount(updateLikes) : setLikesCount("10+");
  }

  
  const like=<Likebutton addLike={addLike} likesCount={likesCount}></Likebutton>
  return (
    <div className={styles.container}>
      {projects.map((project) => (
        <Card
          key={project.title}
          {...project}
          
        >{like}</Card>
      ))}
    </div>
  );
};

export default Projects;

Answer 1

const Likes = () => {
  
  const [likesA, setLikesA] = useState(0);
  const [likesB, setLikesB] = useState(0);
  const [message, setMessage] = useState();

  const addLike =(like) => {
     if(likesA + likesB < 10){
         if(like == "A")
         {
           setLikesA(likesA +1)
         }
         if(like == "B")
         {
           setLikesB(likesB +1)
         }
     }
     else{
        setMessage("Limit was exceeded") 
      }
  }

  return (
   <>
    <div onClick = {() => addLike("A")}>
      Add Like A
    </div>
    <div onClick = {() => addLike("B")}>
      Add Like B
    </div>
    {message && message}
   </>
  );
};