Javascript 如何有条件地链接两个react组件的状态

我正在做一个简单的网站反应，有两个类似的按钮。 每个like按钮位于不同的卡组件中，并且这两个按钮都位于父项目组件中。 我想在网站上喜欢的总数不超过10。所以按钮一注册了4个喜欢，第二个不能注册超过6个喜欢。 这是我的初始代码，它只为两个卡组件提供相同的状态

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;

从“/Card.module.css”导入样式；
const Card=（{img，title，description，ytLink，children}）=>{
返回(
{title}
{说明}

{儿童}
);
};
导出默认卡；
从“./Card”导入卡片；
从“/Projects.module.css”导入样式；
从“React”导入React，{useState，useffect}；
从“./Like”导入Likebutton；
const Projects=（{Projects}）=>{
常量[LikeCount，SetLikeCount]=使用状态（0）；
常量addLike=（）=>{
const updateLikes=likecount+1；
updateLikes<10？setlikes计数（updateLikes）：setlikes计数（“10+”）；
}
康斯特式=
返回(
{projects.map（（project）=>(
{like}
))}
);
};
导出默认项目；

const Likes=（）=>{
const[likesA，setLikesA]=useState（0）；
const[likeb，setlikeb]=useState（0）；
const[message，setMessage]=useState（）；
常量addLike=（like）=>{
if（likesA+likesB<10）{
if（like==“A”）
{
setLikesA（likesA+1）
}
if（like==“B”）
{
setlikeb（likeb+1）
}
}
否则{
setMessage（“超出限制”）
}
}
返回(
addLike（“A”）}>
加上
addLike（“B”）}>
像B一样加
{message&&message}
);
};

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}
   </>
  );
};