Назначьте стиль stati c каждому отображаемому компоненту только один раз - PullRequest
Новая
       4

Назначьте стиль stati c каждому отображаемому компоненту только один раз

0 голосов
/ 13 февраля 2020

Есть ли способ, которым я могу применить свой стиль к каждому отдельному изображению карты только один раз. Например, я назначаю стиль преобразования для css через функцию; Я ожидаю, что изображение будет удерживать это исходное значение, но когда рендерится новый компонент, к этой карте должно быть применено другое значение преобразования, но исходный существующий стиль компонента не должен повторно отображаться. В настоящее время все стили преобразований перерисовываются с разными значениями, возможно ли это в функциональном компоненте реакции? В зависимости от того, где я помещаю свою текущую переменную в функцию Card, все значения постоянно меняются, вне функции Card значения stati c и карты отображаются друг над другом, поэтому вы можете видеть только одну карту. 

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} />
    )
}

1 Ответ

1 голос
/ 13 февраля 2020

Use useMemo . 

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