javascript - ReactJS - UseRef，而不是 useState，来替换 props

Question

我有以下 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 执行相同的操作。我有点困惑，因为我不经常使用引用文献。 那么，有什么想法，当调用 onError 时，如何使用 useRef 来更改图像的来源？

我尝试过这个，但没有运气:

  const imageRef = useRef(imgToFallbackTo);

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

Answer 1

所以，不确定，我最终得到的结果是好是坏，但它有效，并且我的测试正在通过。

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;

如果您知道更好的解决方案，请随时发布。