反应卡片翻转动画的问题答案

【问题标题】：Problems with react card flip animation反应卡片翻转动画的问题
【发布时间】：2022-03-08 08:31:00
【问题描述】：

我正在尝试在我的 React 卡片网格中实现一些 pizazz，但我遇到了实现问题。该方法似乎很简单，即：

从库中导入 ReactCardFlip
声明卡片“isFlipped”并将其设置为默认值的函数
将handleClick 函数绑定到某个按钮，该按钮在按下后执行翻转。
我正在尝试实现的反应卡片翻转库在这里： https://www.npmjs.com/package/react-card-flip

代码如下：

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

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

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

const Card = (props) => (
  <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.
            <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>
          </p>
        </div>
      </div>
    </div>
  </ReactCardFlip>
);

export default Card;

我错过了什么？

谢谢

PS--如果你想在本地机器上运行，那么这里是下面的 repo： https://github.com/freeSc0tt/react-cardsII PPS——我在这里收到这个错误“ReferenceError: isFlipped is not defined”

【问题讨论】：

isFlipped 确实没有在 Card 组件中定义。它只是在 cardFlip 函数中定义的。
尝试移除你在卡片翻转中声明它的 useState 并将其放在卡片中

标签： reactjs react-hooks flip

【解决方案1】：

好吧，我的英语不是最好的，但我会努力的。我没有看到你的背部组件。你必须像这样定义它：

<ReactCardFlip isFlipped={this.state.isFlipped} flipDirection="vertical">
        <div>// YOUR_FRONT_COMPONENT
          This is the front of the card.
          <button onClick={this.handleClick}>Click to flip</button>
        </div>

        <div>// YOUR_BACK_COMPONENT
          This is the back of the card.
          <button onClick={this.handleClick}>Click to flip</button>
        </div>
</ReactCardFlip>

希望我的回答对你有帮助。

【讨论】：