2

我正在使用 ref 为滚动上的元素设置动画。

  const foo = () => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    setAnimClass(
      rect.top >= 0 && rect.bottom <= window.innerHeight ? styles.animClass : ""
    );
  };

此代码在 next.js 应用程序中运行良好。但是当我在create-react-app类型脚本模板中使用它时，它抱怨说Object is possibly 'null'.

很明显，如果ref.currentif (!ref.current) return;不存在，程序将被返回。但是 TypeScript 仍然在下一行给出错误ref.current.getBoundingClientRect()，指向ref.

如何在不从 typescript 配置中删除 null 检查的情况下解决此问题？

完整文件 - https://github.com/mayank1513/react-contact-app/blob/master/src/components/ContactListItem.tsx

这是完整的项目回购 - https://github.com/mayank1513/react-contact-app

到目前为止，我已经绕过了"strict": false在 tsconfig 中使用的问题。但需要在严格模式下进行。

此文件中也存在类似问题。即使"strict": false在 tsconfig 中设置也无法解决此问题。现在我只是依靠document.getElementById()- 大约第 65 行

4

3 回答 3

3

尝试这个：

const ref = useRef() as RefObject<HTMLDivElement>;

const foo = () => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    setAnimClass(
      rect.top >= 0 && rect.bottom <= window.innerHeight ? styles.animClass : ""
    );
  };
于 2021-01-23T06:34:19.573 回答
2

你可以将 ref 转换为任何你从反应中得到的。
const ref = useRef(null) as any;

编辑：我想回来并给出一个更强类型的解决方案，但 Sakshi 的回答就是这样做的。这是惰性修复，因此请遵循他们的解决方案。

于 2021-01-23T06:12:51.220 回答
2

这很简单，只需将 type 添加HTMLDivElement到useRef，并且错误不再出现：

const ref = useRef<HTMLDivElement>(null);

奖励：您应该始终删除内部的侦听器useEffect：

useEffect(() => {
  foo();
  window.addEventListener("scroll", foo);
  window.addEventListener("resize", foo);
  return () => {
    window.removeEventListener("scroll", foo);
    window.removeEventListener("resize", foo);
  }
}, []);
于 2021-01-23T07:25:13.140 回答