React使用lottie-web前端动画

import React, { useEffect, useRef, useState } from 'react';
import lottie from 'lottie-web';

const Animation = props => {
    const { renderer, loop, path, canvasStyle }  = props;

    const lottieRef = useRef(null);
    const [, setLottie] = useState(null);
    useEffect(() => {
        setLottie(
            lottie.loadAnimation({
                container: lottieRef.current,
                // 渲染方式
                renderer,
                // autoplay 自动播放
                // 是否循环播放
                loop,
                // 路径
                path,
            })
        );
    }, []);
    return (
        <div>
            <div ref={lottieRef} className="lottie" style={canvasStyle}></div>
        </div>
    );
};
export default Animation;

     <Animation
         {...{
               renderer: 'svg',
               loop: true,
               path:`${BOS_STATIC_FILE_PREFIX}/adsImportLoading.json`,
               canvasStyle: { width: 300, hight: 300 },
         }}
     />

具体配置项见lottie-web - npm