reactjs - Argument av typen 'RefObject' kan inte tilldelas till parameter av typen 'IDivPosition'

Jag använder Typescript med React. Jag skapar en separat fil för min anpassade funktion som DivPosition.tsx

Jag använder useRef för att skicka referensen till div-elementet till min funktion, men jag får ett fel när jag skickar argumentet.

const Home = () => {
    const divRef = useRef<HTMLDivElement>(null);
    const x = DivPosition(divRef);

    return (
        ...
    )
}

min DivPosition.tsx-kod:

interface IDivPosition{
    divRef: HTMLDivElement | null
}

export const DivPosition = ({divRef}: IDivPosition) => {

  useEffect(() => {
      console.log(divRef);
  });
    ...
  return x;
};

Jag får ett felmeddelande som säger: Argument av typen 'RefObject' kan inte tilldelas till parametern av typen 'IDivPosition'. Egenskapen 'divRef' saknas i typen 'RefObject' men krävs i typen 'IDivPosition'

Svar #1

Returvärdet av useRef är RefObject, typdefinition

/*
* convenience overload for refs given as a ref prop as they typically start with a null value
*
* Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type
* of the generic argument.
* @version 16.8.0
* @see https://reactjs.org/docs/hooks-reference.html#useref
*/
function useRef<T>(initialValue: T|null): RefObject<T>;

försök :

import { useEffect, useRef } from 'react';

interface IDivPosition {
  divRef: RefObject<HTMLDivElement>;
}

export const useDivPosition = ({ divRef }: IDivPosition) => {
  useEffect(() => {
    console.log(divRef);
  });
  return null;
};

const Home = () => {
  const divRef = useRef<HTMLDivElement>(null);
  const x = useDivPosition({ divRef });

  return null;
};

paketversioner:

"react": "^16.14.0",
"@types/react": "^16.14.14",
"typescript": "^4.4.2"

Dessutom, vänligen namnge de anpassade hookarna som börjar med "use".

Måste jag namnge mina anpassade Hooks med början på "use"? Snälla gör det. Denna konvention är väldigt viktig. Utan den skulle vi inte kunna kontrollera överträdelser av reglerna för Hooks automatiskt, eftersom vi inte skulle kunna avgöra om en viss funktion innehåller anrop till Hooks inuti sig.

Relaterade artiklar