如何有條件地鏈接兩個反應組件的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}
   </>
  );
};