Блог

Главная - Вопросы по программированию - Реагируйте на fordwardRef с помощью машинописного текста

Реагируйте на fordwardRef с помощью машинописного текста

#reactjs #typescript #next.js

Вопрос:

Извините..

Я переслал ссылку, используя React forwardRef ниже приведен код y:

 interface PropsDummy {}

const ProfileMenu = forwardRef<HTMLInputElement, PropsDummy>((props, ref) => {
  console.log(ref.current);
}

но почему это вызывает ошибку машинописи?

 Property 'current' does not exist on type '((instance: HTMLInputElement | null) => void) | MutableRefObject<HTMLInputElement | null>'

но если я использую псевдоним этого текущего объекта, он отлично работает без ошибки машинописи

 interface PropsDummy {}

const ProfileMenu = forwardRef<HTMLInputElement, PropsDummy>((props, ref) => {
  const myRef = ref as React.RefObject<HTMLInputElement>;
  console.log(myRef.current);
}

как получить текущий объект без ошибки машинописи?

Спасибо

Ответ №1:

Причина, по которой это не работает, заключается в том, что тип for ForwardedRef определяется как:

 type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;

Поэтому попытка простого доступа .current без какой-либо проверки типов не сработает , потому что функции не обладают таким свойством.

Это сработало, когда вы привели объект к ожидаемому типу, но обратите внимание, что ссылки могут быть либо функцией, либо объектом (или нулем!), поэтому вам следует проверить это, прежде чем пытаться получить доступ к current свойству.

Это должно сработать:

 const ProfileMenu = forwardRef<HTMLInputElement, PropsDummy>((props, forwardedRef) => {
  if (forwardedRef != null amp;amp; typeof forwardedRef !== 'function') {
    console.log(forwardedRef.current);
  }
  
  return (
    <div className="App" ref={forwardedRef}>
      <h1>Hello there</h1>
    </div>
  );
});
Метки: