javascript - React'te ref kullanmaya çalışırken Typescript neden hata veriyor?

Kaydırma sırasında öğeleri canlandırmak için ref kullanıyorum.

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

Bu kod next.js uygulamasında iyi çalıştı, ancak bunu create-react-app type-script şablonunda kullandığımda Object is possibly 'null'. hatası veriyor.

From if (!ref.current) return; it is clear that program will be returned if ref.current does not exist. But still, TypeScript gives error on the next line ref.current.getBoundingClientRect(), pointing at the ref.

Typescript konfigürasyonundan null kontrolünü kaldırmadan bu sorunu nasıl çözebilirim?

tam dosya - https://github.com/mayank1513/react-contact-app/blob/master/src/components/ContactListItem.tsx

Bu tamamen proje deposu - https://github.com/mayank1513/react-contact-app

Şu anda, tsconfig içinde "strict": false kullanarak sorunu aştım. Ancak bunu sıkı modda yapmam gerekiyor.

Bu dosyada da benzer bir sorun var. Ve bu, tsconfig içinde "strict": false ayarlamakla bile çözülmedi. Şimdilik sadece document.getElementById()’e güveniyorum -- yaklaşık olarak 65. satır civarında

Cevap #1

React'ten aldığınızda ref'i herhangi bir şeye dönüştürebilirsiniz.
const ref=useRef(null) as any;

Düzenleme: Geri gelip daha güçlü bir şekilde yazılmış bir çözüm sunmak istedim, ama Sakshi'nin cevabı tam olarak bunu yapıyor. Bu tembel çözüm, bu yüzden onların çözümünü takip edin.

Cevap #2

Bunu dene:

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

İlgili makaleler