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

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

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>
  );
};

OR

container: element.current as HTMLDivElement,

OR

container: element.current!,

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

使用useRef类型脚本

1 个答案: