javascript - ReactJS-UseRef代替useState来代替 Prop

我有以下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进行相同的操作。我有点困惑，因为我不经常使用ref vey。因此，任何想法，在调用useRef后如何使用onError来更改图像的来源？

我尝试了这个，但是没有运气：

  const imageRef = useRef(imgToFallbackTo);

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

最佳答案

因此，不确定，无论我最终得到的结果是好是坏，但它确实有效，并且我的测试通过了。

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;

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

关于javascript - ReactJS-UseRef代替useState来代替 Prop ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59940006/