为 animation 反应的每个孩子设置不同的道具

Question

我制作了一个卡片组件：

我绘制了三次。

当点击卡片应该这样打开：

我已经为孩子设置了一个 setIsOpen 专业版，以返回 boolean，无论卡是否打开，因此我可以将行设置为 1 列而不是 3 列。

但是如果我在另一张卡片打开时单击另一张卡片，它会将布尔值设置为 false，并且当卡片仍然打开时，我将有 3 列：

这个问题的任何逻辑转向？ 下面是代码：

卡号：

export default function CardBox(props) {
    const handleOpen=()=>{
        setIsOpen(!isOpen)
        props.setIsOpen(!props.isOpen)
    }
const [isOpen, setIsOpen] = useState(false);
    return (
    <motion.div transition={{layout:{duration:1, type:"spring"}}} className={styles.root}>
    <motion.div transition={{layout:{duration:1, type:"spring"}}} 
    layout 
    onClick={()=>handleOpen()} 
    className={[`${styles.card} ${isOpen? styles.orange +" "+ styles.alignStart :'' }`]}
    style={{borderRadius:"1rem", boxShadow:'0px 10px 30px rgb(0,0,0,0.5)'}}>
        <motion.h2 layout="position">
            {props.title}
        </motion.h2>
        {isOpen &&
        <motion.div initial={{opacity:0}} animate={{opacity:1}}className={styles.paragraph} >
            <p>{props.par1}</p>
            <p>{props.par2}</p>
        </motion.div>}
        </motion.div>        
    </motion.div>
  )
}

索引代码：

 <Row className={[styles.row, styles.cardRow]} xl={isOpen ? 1 : 3} sm={1}>
    <Col>
      <CardBox setIsOpen={setIsOpen} isOpen={isOpen} title={"Values"} par1={*** text ***} />

    </Col>

    <Col>
      <CardBox setIsOpen={setIsOpen} isOpen={isOpen} title={"Values"} par1={*** text ***} /> 
    </Col>

    <Col>
      <CardBox setIsOpen={setIsOpen} isOpen={isOpen} title={"Values"} par1={*** text ***} />
    </Col>
 </Row>

Answer 1

为每个孩子设置一个索引并将其作为来自父母的prop传递给孩子，然后在父母中将isOpen定义为 state ，其值为 -1 表示 false ，否则为活动孩子的索引。 编写一个 function（在父级中） setChildOpen并将其作为道具传递给子级。 让孩子检查isOpen === index并让子组件相应地采取行动，而不是您之前的真/假选项。 您的setChildOpen应该将isOpen设置为孩子的索引，或者如果没有应该打开，则设置为 -1。

Tl;博士。 提升 state。