我很难找到一个地方来放置一个在 React 中转换渲染组件的函数

Question

我已经被困了一天半，四处移动一个函数来尝试转换组件的样式以将每张卡片放置在旋转的牌组中。卡片正在旋转，但之前渲染的卡片在每次重新渲染时都会改变其旋转值。谁能指出我正确的方向？谢谢，如果您查看沙盒，请原谅您会找到一碗意大利面。

import React, {useState} from "react";
import "./Card.css";

function Card(props) {

  function animateCard(){
    let angle = Math.random() * 90 - 45;
    let xPos = Math.random() * 40 - 20;
    let yPos = Math.random() * 40 - 20;
    let transform = `translate(${xPos}px, ${yPos}px) rotate(${angle}deg)`;
    return transform;
  }
 
  return (
    <div className="Card-container">
      <img
        className="Card"
        style={{ transform:animateCard()}}
        src={props.image}
        alt={props.name}
      />
    </div>
  );
}

export default Card;

Answer 1

以前渲染的卡片的旋转值在每次重新渲染时都会发生变化，因为 animateCard 函数在 'Card' 组件中并且在每次重新渲染时被调用。

你应该把 animateCard 函数放在 CardDeck 组件中，每当你得到一张新卡片时，调用 animateCard 函数来获取转换属性（角度，xPos，yPos ), 然后用 setCard 将每张卡片的变换属性保存到 card 状态。然后，您将把 tranform 属性作为 prop 传递给 Card 组件。这确保一旦属性被生成并保存，它不会在每次重新渲染时再次生成。

这是一个正常运行的 sandbox

我很难找到一个地方来放置一个在 React 中转换渲染组件的函数

I'm having a difficult time trying to find a place to put a function that transforms a rendered component in React

scope

css-transforms

reactjs