React-在子节点加载时显示加载器

Question

I have a modal window component that can take any type of HTML - inline, img tags, iframes etc.

Is it possible for the component to detect if the children have loaded?

An example:

// app
<myComp>
    <img src="some/remote/image.png" alt="" />
</myComp>

// myComp
render() {
    const { children } = this.props;

    // Pseudo code
    const childrenLoading = children !== 'loading'; // <<< Possible to detect this??

    return(
        <div>
            {childrenLoading ? '<p>loading</p>' : children}
        </div>
    );
}

I have looked into the React lifecycle methods, specifically componentDidUpdate, but of course myComp is not receiving new child data so it it doesn't trigger as an update.

Perhaps it is not possible because the image / iframe is loading outside of my React app. If I'm wrong please let me know.

Thanks

Answer 1

Use the onLoad event of the img tag to communicate with the children component.

<img onLoad={this.handleOnLoad} src="//the-src-of-the-image" />

https://reactjs.org/docs/events.html#image-events