javascript - Att sätta en ref på NextJS Image-komponenten skapar ett TypeScript-fel

Jag försöker att refaktorera en av mina komponenter för att använda TypeScript. Som du ser nedan använder jag en referens på NextJS Image-komponenten och försöker sätta typen

import { useRef } from 'react'
import Image, { ImageProps } from 'next/image'


type BannerBlockProps = {
  image?: ImageProps[]
}

const BannerBlock = (props: BannerBlockProps) => {
  const imageRef = useRef<HTMLImageElement >(null)

  return (
  
        <div className='BannerBlock-imageWrapper' >
          <Image className="BannerBlock-image" src={image[0].src} alt={image[0].alt} width={image[0].width} height={image[0].height} ref={imageRef}/>
        </div>
  )
}

export default BannerBlock

Jag får då följande TypeScript-fel på Image-ref-egenskapen:

(egenskap) ref: RefObject-typen '{ className: string; src: string | StaticImport; alt: string | undefined; width: string | number | undefined; height: string | number | undefined; ref: RefObject; }' kan inte tilldelas typen 'IntrinsicAttributes & Omit, "src" | ... 4 till ... | "loading"> & {...; }'. Egenskapen 'ref' finns inte på typen 'IntrinsicAttributes & Omit, "src" | ... 4 till ... | "loading"> & {'

Det händer eftersom i next/dist/client/image.d.ts utelämnas ref-typen på ImageProps:

export declare type ImageProps = Omit<JSX.IntrinsicElements['img'], 'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'> & {
    src: string | StaticImport;
    width?: number | string;
    height?: number | string;
    layout?: LayoutValue;
    loader?: ImageLoader;
    quality?: number | string;
    priority?: boolean;
    loading?: LoadingValue;
    lazyRoot?: React.RefObject<HTMLElement> | null;
    lazyBoundary?: string;
    placeholder?: PlaceholderValue;
    blurDataURL?: string;
    unoptimized?: boolean;
    objectFit?: ImgElementStyle['objectFit'];
    objectPosition?: ImgElementStyle['objectPosition'];
    onLoadingComplete?: OnLoadingComplete;
};

Felet försvinner när jag tar bort | 'ref' från listan över utelämnade egenskaper. Varför utelämnas denna egenskap? Är det dålig praxis att använda ref-egenskapen på en Image-komponent? Det är enkelt att fixa genom att lägga en omslagsdiv på Image-komponenten och lägga till referensen där, men jag är nyfiken på varför detta inte är möjligt och om jag gör rätt.

Svar #1

Att skicka ref till next/image verkar ha lagts till i next 13.0.6.

Relaterade artiklar