React使用react-card-flip实现卡片翻转动画isFlipped未定义报错

原定实现逻辑 #

• 从依赖库导入ReactCardFlip组件
• 声明卡片翻转状态isFlipped并设置初始默认值
• 为按钮绑定handleClick事件处理函数，点击按钮时触发卡片翻转动作
• 动效基于react-card-flip库实现

错误原因 #

核心问题是作用域错误：
你把isFlipped状态、handleClick方法都定义在了一个从未被调用、也没有返回值的孤立函数cardFlip内部，实际渲染导出的Card组件是独立的函数作用域，根本访问不到这两个变量，所以会抛出未定义错误。
除此之外代码还有3个会影响运行的问题：

• React导入路径错误，应该从小写的'react'包导入，而非大写的'React'
• Card组件原来用的是箭头函数隐式返回写法，内部无法直接调用hooks、声明状态
• ReactCardFlip组件要求必须传入两个子元素分别作为卡片正面、背面，原代码只传入了正面元素，翻转后会显示空白。

修复方案 #

1. 删除无用的孤立cardFlip函数，将状态声明、事件处理逻辑全部移入Card组件内部
2. 修正React的导入路径
3. 将Card组件改为带函数体的写法，支持hooks调用
4. 为ReactCardFlip补充卡片背面的内容节点
5. （可选优化）调整DOM结构，将按钮所在的div移出p标签，避免违反HTML语义化规范抛出控制台警告

修复后完整代码 #

import cardstyles from "./Card.module.css";
import React, { useState } from "react";
import ReactCardFlip from "react-card-flip";

const Card = (props) => {
  const [isFlipped, setIsFlipped] = useState(false);

  const handleClick = () => {
    setIsFlipped(!isFlipped);
  };

  return (
    <ReactCardFlip isFlipped={isFlipped} flipDirection="horizontal">
      {/* 卡片正面 */}
      <div className={cardstyles.card}>
        <div className={cardstyles.front}>
          <img
            src="/crypto_new.jpg"
            alt="crypto small hero"
            className={cardstyles.cardImage}
          />
          <div className={cardstyles.container}>
            <h3>
              New hodl price <span className={cardstyles.price}>$99.99</span>
            </h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
              suscipit ut dolor non ultrices.
            </p>
            <div
              style={{
                display: "flex",
                position: "absolute",
                height: "40px",
                width: "auto",
              }}
            >
              <button
                onClick={handleClick}
                style={{
                  display: "flex",
                  position: "relative",
                  height: "40px",
                  width: "210px",
                  outline: "solid 1px black",
                  fontSize: "18px",
                  borderRadius: "2px",
                  textShadow: "0px 0px 5px rgba(0,0,0,0.42)",
                }}
              >
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>
      {/* 卡片背面，可替换为实际业务的背面内容 */}
      <div className={cardstyles.card}>
        <div className={cardstyles.back}>
          <p>卡片背面内容区域</p>
          <button onClick={handleClick}>返回正面</button>
        </div>
      </div>
    </ReactCardFlip>
  )
};

export default Card;

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