반응 렌더링 이미지로드시 감지

Question

사용자 정의 이미지 렌더링을위한 React 구성 요소가 있습니다. 간단한 형태로, 이는 다음과 같다 :

function MyImage(props) { 
    return <img src={props.src} onLoad={props.onLoad} /> 
} 

웹 페이지는 서버에 의해 렌더링 ReactDOMServer이고 <img> 요소는 (의도적으로) 이미 초기 HTML 문서에 존재한다. 그러나 해당 onLoad 이벤트 처리기는 이 아니며이 아닙니다. 나는 이것이 특징이 ReactDOMServer이라고 생각합니다.

은 무엇 때때로 일어날 수있는 것은 사용자 정의 이미지, 특히 작은 것 중 일부는 자바 스크립트를로드 전에로드 을 완료 할 수 있다는 것입니다하거나 시작하기 전에 실행 중이거나 적어도 전에 onLoad 이벤트 핸들러 세트를 반응한다. 결과적으로이 이미지의 onLoad 이벤트로 인해 이벤트 핸들러가 호출되지 않습니다.

기본 이미지가 로딩을 완료 한 후 반작용 렌더링 <img> 요소 내에 설정되어있는 onLoad 이벤트 핸들러는, 항상가 호출 될 수 있도록하는 방법이 있나요?

내 가장 중요한 제약은 내가 반응하여 서버 렌더링 된 HTML 페이지가 src 속성이 올바르게 설정와 <img> 요소를 포함해야합니다 사용하려는 것입니다.

Answer 1

onLoad 핸들러를 componentDidMount() 메소드로 이동할 수 있습니다. docs