Question

我有一个模态窗口组件，可以采用任何类型的HTML-内联，img标签，iframe等。

该组件是否可以检测子代是否已加载？

一个例子：

// 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>
    );
}

我已经研究了React生命周期方法，特别是componentDidUpdate，但是myComp当然不会接收新的子数据，因此它不会作为更新触发。

可能是不可能的，因为图像/ iframe正在我的React应用程序外部加载。如果我错了，请告诉我。

谢谢

Answer 1

使用img标签的onLoad事件与子组件进行通信。

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

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

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

1 个答案: