web-dev-qa-db-fra.com

Comment passer des accessoires aux images clés dans un composant de style avec React?

J'ai le code suivant et je veux passer la valeur de y du composant react à moveVertically image clé. Est-il possible de le faire?

import React from 'react';
    import styled, {keyframes} from 'styled-components';


    const moveVertically = keyframes`
        0% {
            transform : translateY(0px) 
        }
        100% {
            transform : translateY(-1000px) //I need y here
        }
    `;

    //I can access y in here via props but can't send it above
    const BallAnimation = styled.g`
        animation : ${moveVertically} ${props => props.time}s linear
    `;


    export default function CannonBall(props) {

        const cannonBallStyle = {
            fill: '#777',
            stroke: '#444',
            strokeWidth: '2px',
        };

        return (
            <BallAnimation time = {4} y = {-1000}>
                <circle cx = {0} cy = {0} r="25" style = {cannonBallStyle}/>
            </BallAnimation>
        );
    }
reactjsstyled-components
11
LoneCuriousWolf

Vous pouvez faire de moveVertically une fonction. Veuillez considérer le code ci-dessous:

const moveVertically = (y) => keyframes`
    0% {
        transform : translateY(0px) 
    }
    100% {
        transform : translateY(${y}px)
    }
`;

const BallAnimation = styled.g`
    animation : ${props => moveVertically(props.y)} ${props => props.time}s linear
`;

Ici, vous avez y dans les accessoires de BallAnimation. Vous pouvez donc l'extraire et le passer à la fonction moveVertically qui accepte la valeur y comme paramètre.

18
Hriday Modi

Que diriez-vous de faire moveVertically une fonction qui retourne le composant de style keyframes?

De cette façon, vous pouvez passer l'hélice que vous souhaitez:

const moveVertically = (y) =>
  keyframes`
    0% {
      transform: translateY(0px);
    }
    100% {
      transform: translateY(${y}px);
    }
  `

const BallAnimation = styled.g`
  animation: ${props => moveVertically(props.y)} ${props => props.time}s linear;
`
2
Steve Holgado