反应将道具传递给裁判

Question

保持不变：我通过使用以下函数更新ref.current.style属性来对组件进行动画处理。只需浏览goUpLowerCardAnimation属性并将它们分配给ref.current.style。

注意：卡是功能组件。

const Card = React.forwardRef((props, ref) => {
    return (
        <div>
            Card!
        </div>
    )
});

cardRefs = {
        card_1: React.createRef()
    };

const goUpLowerCardAnimation = {
    top: '0',
    left: '0',
    right: '0',
    transform: 'scale(1)',
    zIndex: '1',
    animationName: 'goUpLowerCard',
    animationTimingFunction: 'ease-in-out',
    animationDuration: '0.7s'
};

animate = (currentRef) => {
        for(let b in goUpLowerCardAnimation) {
            currentRef.current.style[b] = goUpLowerCardAnimation[b];
        }
    };
render() {
    return(
       <Card ref={this.cardRefs['card_1']}>
       </Card> 
    )
}

将来：我不想更新ref.current.style，而只发送带有goUpLowerCardAnimation的道具，因此Card组件将根据道具应用动画