我在React Native（Expo）下的.web.js文件中使用lottie-web软件包。
我的问题是在useImperativeHandle中的函数中未定义let变量anim。在useEffect动画中效果极佳。例如，如果我在useEffect初始化之后立即访问anim.play（），则它可以正常工作。但是在play（）函数中它势在必行。
在我的父组件上，我使用useRef创建一个ref并将该ref传递给该组件
const lottieAnim = useRef(null);
-
let anim;
useEffect(() => {
const lottieOptions = {
container: divContainer.current,
renderer: 'svg',
loop,
autoplay,
segments: segments !== false,
animationData,
rendererSettings,
};
anim = lottie.loadAnimation({ ...lottieOptions, ...options });
// anim.play(); works here
if (onAnimationFinish) {
anim.addEventListener('complete', onAnimationFinish);
}
}, []);
useImperativeHandle(ref, () => ({
stop() {
anim.stop();
},
pause() {
anim.pause();
},
play() {
anim.play();
// anim is undefined
},
setSpeed(s) {
anim.setSpeed(s);
},
setDirection(d) {
anim.setDirection(d);
},
playSegments(s) {
anim.playSegments(s);
},
}));
那是因为当React在useImperativeHandle中创建API函数时（由于闭包和对更新策略做出反应，而该更新策略不会通过变量变量触发任何更新），React没有任何意义。毕竟，有一些方法可以解决此问题，关于个人意见该怎么做，我将使用最适合我的类似方法。
// hanlder.js
const stop = anim => anim.stop()
// api.js
const getAPI = anim => () => ({
stop: stop.bind(this, anim),
// or simply
setSpeed: s => anim.setSpeed(s),
// you can mock APIs here if anim is null or throw an Error
});
将anim存储在仅用于首次渲染的状态中，并在getApi useEffect的依赖项数组中使用它
const [anim, setAnim] = React.useState(null);
React.useEffect(() => {
// initialization part
}, []);
React.useImperativeHandle(ref, getAPI(anim), [anim]);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句