使用 useRef 打字稿的 lottie-web 设置容器值

Question

容器正在抱怨，因为 HTMLDivElement | null 不可分配给元素类型

export const Loader: React.FC = () => {
  const element = useRef<HTMLDivElement>(null);  
  useLayoutEffect(() => {
    lottie.loadAnimation({
      animationData,
      container: element.current,
      loop: true
    });
  });

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

Answer 1

在调用 loadAnimation 之前，您必须确保 element.current 有一个值。试试这个：

export const Loader: React.FC = () => {
  const element = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if(element.current) // add this
       lottie.loadAnimation({
         animationData,
         container: element.current,
         loop: true
       });
  }, [element]); // add this, it triggers this effect everytime element changes

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

或

container: element.current as HTMLDivElement,

或

container: element.current!,

第一个选项最干净，因为它不太容易出错。

使用 useRef 打字稿的 lottie-web 设置容器值

lottie-web setting container value using useRef typescript

reactjs

lottie