只为每个渲染的组件分配一次静态样式

Question

有没有一种方法可以将我的风格应用到每个单独的卡片图像一次。例如，我通过函数将转换样式分配给 css；我希望图像保持原始值，但是当呈现新组件时，该卡应该应用不同的变换值，但不应重新呈现原始现有组件样式。目前所有的转换样式都被重新渲染为不同的值，这在功能组件中是否可行？根据我将当前变量放在 Card 函数中的位置，所有值都会不断变化，在 Card 函数之外，值是静态的，并且卡片显示在彼此之上，因此您只能看到一张卡片。

const getStyle = () => {
    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
}


const Card = (props) => {
    let current = getStyle()
    return (
        <img style={{ transform: current }} className="Card" alt={props.name} src={props.cardImg} />
    )
}

Answer 1

使用useMemo.

const Card = (props) => {
    let current = useMemo(getStyle, [])
    return (
        <img style={{ transform: current }} className="Card" alt={props.name} src={props.cardImg} />
    )
}

只为每个渲染的组件分配一次静态样式

Assign a static style to each rendered component only once

javascript

css

rendering

reactjs