您可以异步（动态）加载库和动画json，如下所示：

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

export const Animation = () => {
  const ref = useRef<HTMLDivElement>(null);
  const [lottie, setLottie] = useState<LottiePlayer | null>(null);

  useEffect(() => {
    import('lottie-web').then((Lottie) => setLottie(Lottie.default));
  }, []);

  useEffect(() => {
    if (lottie && ref.current) {
      const animation = lottie.loadAnimation({
        container: ref.current,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        // path to your animation file, place it inside public folder
        path: '/animation.json',
      });

      return () => animation.destroy();
    }
  }, [lottie]);

  return (
    <div ref={ref} />
  );
};

首先安装软件包npm install --save @lottiefiles/lottie-player或简单地安装yarn add @lottiefiles/lottie-player

import React, { FC, useEffect, useRef } from 'react';

const YourCard: FC = () => {
    const ref = useRef(null);
    useEffect(() => {
        import('@lottiefiles/lottie-player');
    });
    return (
        <div>
             <lottie-player
                    id="firstLottie"
                    ref={ref}
                    autoplay
                    mode="normal"
                    src="here your json link/find on lottie website"
                />
            
        </div>
    );
};
export default YourCard;

还要将名为declaration.d.ts的声明文件添加到项目的根目录中

declare namespace JSX {
  interface IntrinsicElements {
    "lottie-player": any;
  }
}

为了完成别人的回答，我创建了一个功能组件：（复制粘贴即可使用）。
它位于名为lotie/index.js的文件夹中

import * as React from 'react';

export default function Lotie({ src }) {
  const ref = React.useRef();
  const [lottie, setLottie] = React.useState(null);

  React.useEffect(() => {
    import('lottie-web').then(Lottie => setLottie(Lottie.default));
  }, []);

  React.useEffect(() => {
    if (lottie && ref.current) {
      const animation = lottie.loadAnimation({
        container: ref.current,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        // path to your animation file, place it inside public folder
        path: src,
      });

      return () => animation.destroy();
    }
  }, [lottie]);

  return <div ref={ref}></div>;
}

用途：

import Lotie from '../../components/common/lotie';

....

  <Lotie src={'/lotiefiles/loading-house.json'} />

....