如何导入Lottie组件？

Question

在顶级组件下面是上使用导入时，混合很容易出现TypeError: Cannot read properties of undefined (reading 'root')错误。

所以我已经按照他们的建议做了，并有了下面的imports.server.tsx文件。

export * from "lottie-react";

然后，我的组件app.tsx看起来就像这 lottie示例。

import React from "react";
import * as Lottie from "../imports.server";
import groovyWalkAnimation from "../../public/assets/102875-cinema-clap.json";

export default function App() {
  return (
    <>
      <h1>lottie-react - Component</h1>
      <Lottie animationData={groovyWalkAnimation} />;
    </>
  );
}

但是我得到了以下错误

JSX元素类型'Lottie‘没有任何构造或调用signatures.ts(2604)

编辑1:

下列措施似乎适用于进口：

imports.server.tsx



import Lottie from "lottie-react";
export default Lottie;



AppTry.tsx



import React from "react";
import Lottie from "../imports.server";

import groovyWalkAnimation from "../../public/assets/102875-cinema-clap.json";

export default function AppTry() {
  // console.log(LottieModule);
  return (
    <>
      <h1>lottie-react - Component</h1>
      <Lottie animationData={groovyWalkAnimation}></Lottie>
    </>
  );
}

现在，像"animationData“和"autoPlay”这样的各种参数弹出在Lottie组件上，我认为这意味着导入正常吗？但是，在呈现AppTry.tsx时，我得到了这个错误。

react.development.js:220警告: React.createElement: type无效--需要一个字符串(用于内置组件)或类/函数(用于复合组件)，但是React.createElement: object。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。 检查AppTry的呈现方法。

编辑2:

import { useLottie } from "lottie-react";
import Lottie from "lottie-react";
import groovyWalkAnimation from "../../public/assets/102875-cinema-clap.json";

const Example = () => {
  const options = {
    animationData: groovyWalkAnimation,
    loop: true,
    autoplay: true,
  };

  const { View } = useLottie(options);

  return View;
};

const Example1 = () => {
  return <Lottie animationData={groovyWalkAnimation} />;
};

export const TopicOverview = () => {

  return (
    <div className="space-y-20">
      <Example1></Example1>
      <Example></Example>
    </div>
  );
};

Answer 1

看来这跟你进口洛蒂的方式有关。

你不应该像这样进口洛蒂吗？

import Lottie from "lottie-react";

Answer 2

我也很难在Remix让这件事起作用。您也可以在树的较高位置执行延迟加载导入。

import type { LottiePlayer } from "@lottiefiles/lottie-player";
import { useEffect } from "react";

interface LottieCompProps {
  src: LottiePlayer["src"];
  style?: Partial<LottiePlayer["style"]>;
}

function LottieComp({ src, style = {} }: LottieCompProps): JSX.Element | null {
  // NB: otherwise, will cause app to crash. see https://remix.run/docs/en/v1/guides/constraints#third-party-module-side-effects
    useEffect(() => {
      import("@lottiefiles/lottie-player");
    },[]);

  if (typeof document === "undefined") return null;
  return (
    //@ts-expect-error dynamic import
    <lottie-player
      autoplay
      loop
      mode="normal"
      src={typeof src === "string" ? src : JSON.stringify(src)}
      style={{
        ...{
          width: "100%",
          backgroundColor: "transparent",
        },
        ...style,
      }}
    />
  );
}

export default LottieComp;

Answer 3

问题出现在我的root.tsx中，这是一个调用<UnexpectedErrors/>组件的ErrorBoundary()函数。在各种slug.tsx文件中都调用了相同的组件。出于某种原因，混音不喜欢这样。

有两个不同的<UnexpectedErrors/>和<UnexpectedErrors2/>组件-一个用于slug.tsx文件，另一个用于index.tsx文件。