Question

我正在使用无状态功能组件在从外部资源加载图像时添加微调器，如下所示：

function ExternalImage(props) {
  const [loaded, setLoaded] = useState(false);
  function onLoad() {
    console.log('loaded');
    setLoaded(true);
  }
  return loaded
     ? <img 
        onLoad={onLoad}
        src={props.src}
        alt={props.alt}
        {...props} 
       /> 
     : <Spin />
}

并像这样使用它：

<ExternalImage src={image.src} alt={image.alt} className="image" />

为什么onLoad永远不会被呼叫？

Answer 1

未加载图像时，您实际上并没有在渲染图像。您需要对其进行渲染以使其onLoad触发

function ExternalImage(props) {
  const [loaded, setLoaded] = useState(false);
  function onLoad() {
    console.log('loaded');
    setLoaded(true);
  }
  return (
    <>
        <img 
        style={{display: loaded? 'block': 'none'}}
        onLoad={onLoad}
        src={props.src}
        alt={props.alt}
        {...props} 
       /> 
       {!loaded && <Spin /> }
    </>
  )
}

Answer 2

您在return语句中的条件会阻止渲染图像，因此它将永远不会被加载。

function ExternalImage(props) {
  const [loaded, setLoaded] = useState(false);
  function onLoad() {
    console.log('loaded');
    setLoaded(true);
  }

  return (
    <>
      <img 
        onLoad={onLoad}
        src={props.src}
        alt={props.alt}
        {...props} 
      /> 
      {!loaded && <Spin />}
    </>
  )
}

另外，请记住使用useCallback挂钩来记住您的onLoad函数：

function ExternalImage(props) {
  const [loaded, setLoaded] = useState(false);
  const onLoad = useCallback(() => {
    console.log('loaded');
    setLoaded(true);
  }, [])

  return (
    <>
      <img 
        onLoad={onLoad}
        src={props.src}
        alt={props.alt}
        {...props} 
      /> 
      {!loaded && <Spin />}
    </>
  )
}

使用条件渲染时，不会调用图像标签上的React onLoad事件

2 个答案: