React中如何将API数据动态注入Lottie动画文件

核心思路 #

直接修改Lottie JSON数据结构，替换目标组件（comp_1/comp_2）对应的图片引用，再将处理后的JSON传给lottie-react渲染——无需依赖库的特殊注入props，兼容React 16及以上版本。

实现步骤 #

1. 编写Lottie数据处理函数 #

先导入原始Lottie动画JSON，通过深拷贝避免污染源文件，然后遍历assets数组找到目标组件，替换其图片引用并添加新的资源条目：

import lottieAnimation from './your-animation.json';

const modifyLottieAssets = (animationData, logo1Url, logo2Url) => {
  // 深拷贝原动画数据
  const modifiedData = JSON.parse(JSON.stringify(animationData));

  // 遍历assets数组，定位并修改目标组件
  modifiedData.assets.forEach(asset => {
    // 处理comp_1对应的Logo
    if (asset.id === 'comp_1' && asset.layers?.[0]) {
      asset.layers[0].refId = 'custom-logo-1';
      // 添加新的图片资源到assets数组
      modifiedData.assets.push({
        id: 'custom-logo-1',
        u: '', // 资源路径前缀，无需求则留空
        p: logo1Url, // API返回的Logo1地址
        e: 0 // 图片资源类型标识
      });
    }
    // 处理comp_2对应的Logo
    else if (asset.id === 'comp_2' && asset.layers?.[0]) {
      asset.layers[0].refId = 'custom-logo-2';
      modifiedData.assets.push({
        id: 'custom-logo-2',
        u: '',
        p: logo2Url, // API返回的Logo2地址
        e: 0
      });
    }
  });

  return modifiedData;
};

2. 在React组件中结合API数据使用 #

先从接口获取Logo地址，再触发动画数据处理，最后用lottie-react渲染处理后的动画：

import { useLottie } from 'lottie-react';
import { useEffect, useState } from 'react';

const AnimatedLogoContainer = () => {
  const [logoUrls, setLogoUrls] = useState({ logo1: '', logo2: '' });
  const [processedAnimation, setProcessedAnimation] = useState(null);

  // 从API获取Logo地址
  useEffect(() => {
    const fetchLogos = async () => {
      const res = await fetch('your-api-endpoint');
      const data = await res.json();
      setLogoUrls({ logo1: data.logo1Url, logo2: data.logo2Url });
    };
    fetchLogos();
  }, []);

  // 当Logo地址获取完成后，处理Lottie数据
  useEffect(() => {
    if (logoUrls.logo1 && logoUrls.logo2) {
      const modifiedAnimation = modifyLottieAssets(lottieAnimation, logoUrls.logo1, logoUrls.logo2);
      setProcessedAnimation(modifiedAnimation);
    }
  }, [logoUrls]);

  if (!processedAnimation) return <div>Loading...</div>;

  const lottieOptions = {
    animationData: processedAnimation,
    loop: true,
    autoplay: true
  };

  const { View } = useLottie(lottieOptions);

  return <div className="lottie-container">{View}</div>;
};

export default AnimatedLogoContainer;

关键注意事项 #

• 深拷贝必要性：必须拷贝原动画数据，直接修改源JSON会导致全局状态污染，若数据量较大可使用lodash.cloneDeep提升效率。
• 资源ID匹配：新添加的资源id必须与组件层的refId完全一致，Lottie渲染时会通过该关联加载对应图片。
• 兼容性：该方案基于Lottie核心规范实现，支持所有基于官方lottie-web的React封装库，无版本兼容问题。

内容的提问来源于stack exchange，提问作者NoNAME