reactjs - วิธีที่ดีที่สุดในการจัดการ useRef(null) ใน typescript

ดังนั้น ฉันมี titleRef นี้

const titleRef = useRef<HTMLHeadingElement | null>(null);

มันถูกแนบมากับหัวข้อนี้:

<h1 ref={titleRef}>Hi!</h1>

ฉันต้องการใช้มันเพื่อทำงานบางอย่างเกี่ยวกับการจัดรูปแบบเมื่อปรับขนาดหน้าจอ ดังนี้:

if (titleRef.current.style.offsetWidth > '10px') {...}

TS ไม่ชอบสิ่งนี้ ดูนะ, useRef(null) หมายความว่า titleRef อาจจะ เท่ากับ null (ซึ่งก็ยุติธรรมดี) ดังนั้นทุกที่ที่ฉันใช้ titleRef ฉันต้องพิจารณาสิ่งนั้นด้วยบางอย่างเช่น

if (titleRef.current) {
  ...do the thing
}` 

ซึ่งจะกลายเป็นเรื่องน่ารำคาญถ้า titleRef ถูกใช้งานบ่อย ๆ

มีวิธีที่สง่างามกว่านี้ในการจัดการสถานการณ์นี้ไหม? ตั้งค่า titleRef ให้เป็นองค์ประกอบ <h1> โดยตรงใน useRef เลยดีไหม? หรือ แทนที่จะใช้ null ลองส่ง useRef() ด้วย HTMLHeadingElement แบบ “ทั่วไป” บ้าง?

แก้ไข: การเชนแบบไม่บังคับเป็นสิ่งแรกที่ฉันลอง แต่ดูเหมือนว่านั่นจะช่วยอะไรไม่ได้:

แก้ไขครั้งที่ 2: การเพิ่ม ! จะช่วยล้างคำเตือนได้ แต่ก็ทำให้ค่ากลายเป็นค่าคงที่และอาจนำไปสู่ปัญหา ขึ้นอยู่กับกรณีการใช้งานของคุณ

แก้ไข 3: การใช้ optional chaining อาจทำให้ตัวตรวจสอบโค้ดโกรธได้เช่นกัน ถ้าคุณกำลังจะแก้ไข titleRef.current

ถ้าคุณไม่ได้แก้ไขค่าดังกล่าว แค่เพียงอ่านมัน ? ก็น่าจะใช้ได้ แต่ถ้าไม่ใช่...

สรุปย่อ

แม้ว่าคำตอบด้านล่างจะใช้ได้ บาง ครั้ง แต่ข้อเสียดูเหมือนไม่คุ้มค่ากับฉัน ตอนนี้ฉันจะยึดตามวิธีของฉันถ้าเป็นสแปม...

คำตอบ #1

ถ้าคุณไม่ได้ตั้งใจที่จะกำหนด null ในอนาคตและมันเป็นเพียงค่าตั้งต้น คุณสามารถใช้ได้ดังนี้:

const titleRef = useRef<HTMLHeadingElement>(null!);

เครื่องหมายอัศเจรีย์หลัง null บอก TypeScript ว่ามันตั้งใจให้เป็นค่าตั้งต้นและค่าจะมีแนวโน้มเปลี่ยนแปลงในภายหลัง

ดูบันทึกย่อ Typescript-cheatsheets ที่นี่

คำตอบ #2

โอเค สุดท้ายฉันก็ได้ทดสอบเรื่องนี้แล้ว การเชนแบบเลือกได้ช่วยให้คุณกำจัด if ที่ทำให้โค้ดของคุณบวมได้:

  const myTestRef = React.useRef<IFancyRef>(null);

  const handleClick = () => {
    myTestRef.current?.focus();
    // or
    myTestRef.current!.focus(); // this assumes you KNOW that myTestRef is assigned
  };

นี่คือ Codesandbox สำหรับคุณ