React项目中点击Header按钮实现所有塔罗牌卡片统一翻面的方法

核心实现逻辑：由于触发翻面的按钮在Header组件，受控对象是TarotCard组件内的卡片，需要将控制翻面的状态放在两个组件的公共父层级，通过props传递状态实现联动。

• 1. 公共父组件定义全局翻面状态
     示例（以App组件为公共父组件为例）：

import { useState } from 'react'
import Header from './components/Header'
import TarotCard from './components/TarotCard'

function App() {
  // 全局翻面状态：true为展示牌面，false为展示背面
  const [isAllFlipped, setIsAllFlipped] = useState(false)
  return (
    <div className="App">
      {/* 给Header传递状态切换方法，绑定到翻面按钮 */}
      <Header onFlipAll={() => setIsAllFlipped(prev => !prev)} />
      {/* 给TarotCard传递当前翻面状态 */}
      <TarotCard isFlipped={isAllFlipped} />
    </div>
  )
}
export default App

• 2. Header组件绑定点击事件
     在Header组件内接收props，绑定到对应按钮上：

const Header = ({ onFlipAll }) => {
  return (
    <header>
      {/* 原有Header内容 */}
      <button onClick={onFlipAll}>全部翻面</button>
    </header>
  )
}

• 3. 修改TarotCard组件适配翻面逻辑
     修改后的代码如下：

import { imagesUrl } from "../../constants/urls"
import useRequestData from "../../hooks/useRequestData"
import { Card, Container, Footer, CardFront, CardBack } from "./styledTarotCard"

// 接收父组件传递的翻面状态
const TarotCard = ({ isFlipped }) => {
  const getTarot = useRequestData([], "tarot.json")

  const renderCard = getTarot?.cards?.map((card) => {
    return (
      // 给Card组件传递flipped属性控制样式
      <Card key={card.name} flipped={isFlipped}>
        {/* 卡片正面：原有牌面内容 */}
        <CardFront>
          <img src={`${imagesUrl}${card.image}`} alt="塔罗牌面" />
          <Footer>
            <p>{card.name}</p>
          </Footer>
        </CardFront>
        {/* 卡片背面：自定义统一背面样式 */}
        <CardBack />
      </Card>
    )
  })

  return (
    <Container>
      {renderCard}
    </Container>
  )
}

export default TarotCard

• 4. 修改styled-components样式实现3D翻转动画
     修改styledTarotCard.js文件，新增翻面相关样式：

import styled from 'styled-components'

export const Container = styled.div`
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  perspective: 1000px; /* 父容器加透视实现3D效果 */
`

export const Card = styled.div`
  position: relative;
  width: 150px;
  height: 250px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  /* 根据传递的flipped属性控制翻转角度 */
  ${props => props.flipped && `
    transform: rotateY(180deg);
  `}
`

// 正反面公共样式
const CardFace = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 翻转时隐藏背面 */
  border-radius: 8px;
  overflow: hidden;
`

export const CardFront = styled(CardFace)`
  /* 正面默认朝上 */
`

export const CardBack = styled(CardFace)`
  transform: rotateY(180deg); /* 背面默认翻转180度隐藏 */
  background-color: #2c3e50; /* 可自定义背面背景色或背景图 */
`

export const Footer = styled.div`
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 8px;
  background: rgba(0,0,0,0.7);
  p {
    color: white;
    margin: 0;
    text-align: center;
  }
`

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