获取错误: react中未定义函数

Question

我在react中做了一些动画代码，但我得到了这个错误，getKeyFrames和getTiming没有定义，我的代码中有一些问题，它没有得到我的函数

./src/WithLigin.js
  Line 59:5:  'getKeyFrames' is not defined  no-undef
  Line 68:5:  'getTiming' is not defined     no-undef

Search for the keywords to learn more about each error.

在这里我附上了我的整个代码，谁可以研究它，并帮助我解决这个问题？任何帮助都将不胜感激。

import React,{ useRef, useState } from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
    withRouter,
    NavLink
} from "react-router-dom";
import ScrollToTop from "./scrollToTop";
import App from "./App";
import { useAuth0 } from "@auth0/auth0-react";
import { useSpring, animated, useTransition } from 'react-spring';
//import { useGesture } from 'react-use-gesture';
import { AnimationSequence, Animatable } from 'react-web-animation';

const LoginButton = () => {
    const { loginWithRedirect, isAuthenticated, isLoading, error } = useAuth0();
    const scrollingLeft = useSpring({
        from: { transform: "translate(60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true
    });

    const scrollingRight = useSpring({
        from: { transform: "translate(-60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true
    });

    const [items, set] = useState([1, 2, 3, 4]);
    const [currentTime,setCurrentTime] = useState('0');
    const [playState,setPlayState] = useState('running');
    const transitions = useTransition(items, item => item.key, {
        from: { transform: 'translate3d(0,-40px,0)' },
        enter: { transform: 'translate3d(0,0px,0)' },
        leave: { transform: 'translate3d(0,-40px,0)' },
    })

    getKeyFrames=() => {
        return [
            { transform: 'scale(1)', opacity: 1, offset: 0 },
            { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)', opacity: 0.6, offset: 1 },
        ];
    };

    getTiming=(duration) => {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards',
        };
    }
    return (
        <Router>
                        <div className="full_width">
                            <AnimationSequence
                                playState={playState}
                                currentTime={currentTime}
                            >
                                <Animatable.div
                                    id="1"
                                    keyframes={this.getKeyFrames()}
                                    timing={this.getTiming(2000)}
                                >
                                    Web Animations API Rocks
                                </Animatable.div>
                                <Animatable.div
                                    id="2"
                                    keyframes={this.getKeyFrames()}
                                    timing={this.getTiming(4000)}
                                >
                                    It really does!
                                </Animatable.div>
                            </AnimationSequence>
                        </div>
        </Router>
    );
};

export default LoginButton;

Answer 1

因为这是功能组件，所以您不能使用this，您需要使用const来定义函数。所以它应该是这样的：

const getKeyFrames=() => {
        return [
            { transform: 'scale(1)', opacity: 1, offset: 0 },
            { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)', opacity: 0.6, offset: 1 },
        ];
    };

    const getTiming=(duration) => {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards',
        };
    }

像这样打电话：

<Animatable.div
    id="1"
    keyframes={getKeyFrames()}
    timing={getTiming(2000)}
>
    Web Animations API Rocks
</Animatable.div>
<Animatable.div
    id="2"
    keyframes={getKeyFrames()}
    timing={getTiming(4000)}
>

Answer 2

您忘记将函数声明为变量(示例: const)：它应该是：

​

const getKeyFrames=() => {
        return [
            { transform: 'scale(1)', opacity: 1, offset: 0 },
            { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)', opacity: 0.6, offset: 1 },
        ];
    };

   const getTiming=(duration) => {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards',
        };

​

然后，因为它是一个功能组件，所以您不需要使用这个关键字

​

<Animatable.div
       id="1"
       keyframes={getKeyFrames()}
       timing={getTiming(2000)}
       >
       Web Animations API Rocks
  </Animatable.div>
 <Animatable.div
     id="2"
     keyframes={getKeyFrames()}
     timing={tgetTiming(4000)}
  >

​

Answer 3

修改你所有的函数代码--分配你的函数const getKeyFrames=() =>{}并像下面的keyframes={getKeyFrames}一样传递

 const getKeyFrames=() => {
        return [
            { transform: 'scale(1)', opacity: 1, offset: 0 },
            { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)', opacity: 0.6, offset: 1 },
        ];
    };

jsx

      <Animatable.div
         id="1"
         keyframes={getKeyFrames}
         timing={getTiming(2000)}
         >