react、umijs中添加购物车小球的抛物线--上代码

在类组件index文件中使用

import React, { Component, createElement, createRef } from 'react'
import './index.css'

export default class Addcart extends Component{
    constructor(props) {
        super(props)
        this.state = {
            arr: ['商品1', '商品2', '商品3', '商品4', '商品5', '商品6', '商品7', '商品8', '商品9', '商品10'],
            // 初始值
            num: 0
        }
    }
    // 获取收藏盒子
    collect = createRef()
    Getcollect = () => this.collect.current
    nums = 0
    // 给每个span绑定点击事件
    Fnstart(e) {
        this.nums++
        // 获取当前span的x和y的值
        let x = e.changedTouches[0].clientX
        let y = e.changedTouches[0].clientY
        // 点击一次让state中的num+1
        this.setState({
            num: this.nums
        })
        // 调用函数把x和y当参数传过去
        this.createBall(x, y)
        // 判断收藏的数量不为0的时候让收藏盒子显示
        if (this.nums != 0) {
            this.Getcollect().style.opacity = '1'
        }
    }
    // 创建小球添加动画
    createBall(left, top) {
        // 创建div元素
        let Ball = document.createElement('div')
        // 给div定位
        Ball.style.position = "absolute";
        // div的left和span的left是一样的
        Ball.style.left = left + 'px'
        // div的top和span的top是一样的
        Ball.style.top = top +