javascript - TypeScript-fel: Egenskapen 'scrollIntoView' finns inte på typen 'never'. TS2339

I min komponent har jag följande kod för att scrolla till botten av sidan:

const el = useRef(null);

useEffect(() => {
    if (el.current === null) { }
    else
        el!.current!.scrollIntoView({ block: 'end', behavior: 'smooth' });

    if (props.loading != true)
        props.fetchFeedbackTaskPageData(submissionId);

}, [])

Denna el-referens är kopplad till en div (i botten av sidan) på detta sätt:

<div id={'el'} ref={el}></div>

Men jag får följande fel:

Egenskapen 'scrollIntoView' finns inte på typen 'never'. TS2339

När jag inte använde ! fick jag detta fel:

Objektet är eventuellt 'null'. TS2531

Jag kollade många inlägg om detta problem men såg inte hur man hanterar detta i React när man använder useRef och scrollIntoView. Några idéer?

Svar #1

För alla som läser detta 2020 är det

const el = useRef<null | HTMLDivElement>(null);

och inte längre:

const el = useRef<null | HTMLElement>(null);

Svar #2

Du måste tala om för useRef vilka typer förutom null den kommer att tilldelas, t.ex. useRef<null | number>(null) eller i ditt fall useRef<null | HTMLElement>(null).

Problemet är att genom att tilldela null som standardvärde till ref, kan TypeScript bara gissa att typen av ref kommer att vara densamma som dess initialvärde (null) - vilket är anledningen till att du får de fel du nämnde. Generellt sett behöver refs inte vara DOM-komponenter, så useRefs typdefinition antar inte att den kommer att tilldelas en sådan.

Relaterade artiklar