Javascript 使用react konva在画布上设置GIF动画

我正在尝试使用react为应用程序创建UI。我正在使用react konva创建2D画布。我已经知道如何将图像导入到画布上，但在尝试制作gif动画时遇到了问题。有关于如何在konva中实现这一点的文档，但我似乎无法将其转换为react konva

提供了在konva中执行此操作的文档。

从“React”导入React；
从“react dom”导入{render}；
从“react konva”导入{Stage，Layer，Image}；
//gifler将被导入到全局窗口对象中
进口“礼品”；
常量GIF=（{src}）=>{
const imageRef=React.useRef（null）；
const canvas=React.useMoom（（）=>{
const节点=document.createElement（“画布”）；
返回节点；
}, []);
React.useffect（（）=>{
//保存动画实例以在卸载时停止它
让动画；
window.gifler（src.get）（a=>{
anim=a；
动画（画布）；
anim.onDrawFrame=（ctx，帧）=>{
ctx.drawImage（frame.buffer，frame.x，frame.y）；
imageRef.current.getLayer（）.draw（）；
};
});
return（）=>anim.stop（）；
}，[src，canvas]）；
返回；
};
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
呈现（
从“React”导入React）；
从“react dom”导入{render}；
从“react konva”导入{Stage，Layer，Image}；
//gifler将被导入到全局窗口对象中
进口“礼品”；
常量GIF=（{src}）=>{
const imageRef=React.useRef（null）；
const canvas=React.useMoom（（）=>{
const节点=document.createElement（“画布”）；
返回节点；
}, []);
React.useffect（（）=>{
//保存动画实例以在卸载时停止它
让动画；
window.gifler（src.get）（a=>{
anim=a；
动画（画布）；
anim.onDrawFrame=（ctx，帧）=>{
ctx.drawImage（frame.buffer，frame.x，frame.y）；
imageRef.current.getLayer（）.draw（）；
};
});
return（）=>anim.stop（）；
}，[src，canvas]）；
返回；
};
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
渲染(