函数在callbackFinished (winwheel库)中没有定义

Question

当我试图调用一个函数与callbackFinished属性内的winwheel动画我得到函数没有定义，而它被定义在同一个类

import React from 'react'
import Winwheel from 'winwheel'
import TweenMax from 'gsap'
const Roulette = ({ width, height, canvasId}) => {
let winWheel = null
const wheelData = {}
const animation = {
'type': 'spinToStop',
'duration': 5,
'spins': 8,
'easing': 'Power2.easeInOut',
'callbackFinished': 'alertPrize()' //Error here, can't get alertPrize() function
}
wheelData['animation'] = animation

function alertPrize()
{
createWheel()
// Call getIndicatedSegment() function to return pointer to the segment pointed to on wheel.
let winningSegment = winWheel.getIndicatedSegment();
// Basic alert of the segment text which is the prize name.
alert("You have won " + winningSegment.text + "!");
}
const startAnimation = () => {
winWheel = null
createWheel()
winWheel.startAnimation()
}
const createWheel = () => {
if (typeof window !== 'undefined' && winWheel == null) {
winWheel = new Winwheel(wheelData)
}
}
createWheel()
return (
<div>
<canvas id={canvasId} width={width} height={height} className='z-0'>
Canvas not supported
</canvas>
<button onClick={startAnimation} className='absolute w-full h-full top-0'></button>
</div>
)
}

有什么方法可以在callbackFinished上获得函数吗?

Answer 1

您将函数名称传递为string，而不是您需要将其传递为reference，这里是固定代码。

const animation = {
'type': 'spinToStop',
'duration': 5,
'spins': 8,
'easing': 'Power2.easeInOut',
'callbackFinished': alertPrize
}