ReactJS - Использовать Ref вместо useState для замены реквизита - PullRequest
Новая
       2

ReactJS - Использовать Ref вместо useState для замены реквизита

0 голосов
/ 28 января 2020

У меня есть следующий компонент ImageFallback. Это обеспечивает запасное изображение, svg, когда оригинала нет. 

export interface ImageProps {
  srcImage: string;
  classNames?: string;
  fallbackImage?: FallbackImages;
}

const Image = ({
  srcImage,
  classNames,
  fallbackImage = FallbackImages.GENERAL_FALLBACK
}: ImageProps) => {
  const imgToSourceFrom = `srcImage`;
  const imgToFallbackTo = `fallbackImage`;

  const [imgUrl, setImgUrl] = useState<string>(imgToSourceFrom);

  return <img src={imgUrl} className={classNames} onError={() => setImgUrl(imgToFallbackTo)} />;
};

export default Image;

Теперь я хочу сделать то же самое, используя useRef вместо useState. Я немного растерялся, потому что я не часто пользуюсь ссылками. Итак, любая идея, как я могу использовать useRef при вызове onError, чтобы изменить источник изображения ??

Я пробовал это, но не повезло: 

  const imageRef = useRef(imgToFallbackTo);

  console.log(imageRef.current); // this print the fallback..
  return <img src={imgToSourceFrom} className={classNames} onError={() => imageRef.current} />;

1 Ответ

1 голос
/ 28 января 2020

Так что, не уверен, если то, чем я в итоге оказался, лучше или хуже, но это работает, и мои тесты проходят. 

export interface ImageProps {
  srcImage: string;
  classNames?: string;
  fallbackImage?: FallbackImages;
}

const Image = ({
  srcImage,
  classNames,
  fallbackImage = FallbackImages.FALLBACK
}: ImageProps) => {
  const imgToSourceFrom = srcImage;
  const imgToFallbackTo = fallbackImage;

  const imageRef = useRef(null);
  const whenImageIsMissing = () => {
    imageRef.current.src = imgToFallbackTo;
  };

  return (
    <img ref={imageRef} src={imgToSourceFrom} className={classNames} onError={whenImageIsMissing} />
  );
};

export default Image;

Если вы знаете лучшее решение, пожалуйста, не надо стесняйтесь оставлять сообщения.

...