reactjs - useRef TypeScript - ไม่สามารถกําหนดให้พิมพ์ LegacyRef<HTMLDivElement>

ฉันกำลังพยายามใช้ useRef กับ TypeScript แต่กำลังประสบปัญหาเล็กน้อย

ด้วย RefObject ของฉัน (ฉันคิดว่า) ฉันจําเป็นต้องเข้าถึงปัจจุบัน (เช่น node.current)

ฉันได้ลองทำตามสิ่งต่อไปนี้

• const node: RefObject<HTMLElement> = useRef(null);

• const node = useRef<HTMLElement | null>(null);

แต่เมื่อฉันไปตั้งค่า ref ฉันมักจะบอกว่า X ไม่สามารถกําหนดให้พิมพ์ 'LegacyRef<HTMLDivElement> | undefined' ได้

return <div ref={ node }>{ children }</div>

แก้ไข: สิ่งนี้ไม่ควรถูกจำกัดเพียงแค่ชนิดขององค์ประกอบใดชนิดหนึ่ง ดังนั้นไม่ใช่แค่ HTMLDivElement | HTMLFormElement | HTMLInputElement

แก้ไข: นี่ควรจะใช้ได้เป็นตัวอย่าง

import React, { useRef, RefObject } from 'react';

function Test() 
{
    // const node = useRef(null);
    // const node: RefObject<HTMLElement> = useRef(null);
    const node = useRef<HTMLElement | null>(null);

    if (
        node &&
        node.current &&
        node.current.contains()
    ){ console.log("current accessed")}

    return <div ref={ node }></div>
}

คำตอบ #1

ไม่มีวิธีไหนข้างต้นที่ใช้ได้ผลสำหรับฉัน แต่ปรากฏว่าทางแก้ปัญหานั้นค่อนข้างง่าย...

สิ่งเดียวที่ฉันทำผิดคือไม่ได้ระบุอย่างชัดเจนว่า "null" เป็นพารามิเตอร์ในการเริ่มต้น useRef (มันคาดหวัง null ไม่ใช่ undefined) นอกจากนี้คุณไม่สามารถใช้ "HTMLElement" เป็นประเภท ref ของคุณได้ คุณต้องระบุให้เฉพาะเจาะจงมากขึ้น สำหรับฉันมันคือ "HTMLDivElement" เป็นตัวอย่าง

ดังนั้นรหัสที่ทำงานได้สำหรับฉันก็เป็นประมาณนี้:

const ref = useRef<HTMLDivElement>(null);

return <div ref={ref}> Some Content... </div>

คำตอบ #2

เพียงแค่ import React:

import React, { useRef } from 'react';

function Test() {
    const node = useRef<HTMLDivElement>(null);

    if (
        node &&
        node.current &&
        node.current.contains()
    ){ console.log("current accessed")}

    return <div ref={node}></div>
}

ฉันได้ทำการอัปเดต ใช้ HTMLDivElement เป็นพารามิเตอร์ทั่วไปแทน HTMLElement | null นอกจากนี้ contains ต้องการอาร์กิวเมนต์

อัปเดต useRef คาดหวังอาร์กิวเมนต์แบบเจนเนอริกของประเภทองค์ประกอบ DOM คุณไม่จำเป็นต้องใช้ | null เพราะว่า RefObject รู้แล้วว่า current อาจเป็น null

ดูประเภทถัดไป:

interface RefObject<T> {
  readonly current: T | null
}

TS และ React มีความฉลาดพอที่จะสังเกตได้ว่า ref ของคุณอาจเป็นค่า null