如何在react中使用onload？

2023-05-19 21:53| 来源: 网络整理| 查看: 265

您可以简单地将其加载到componentDidMount中，而不是呈现您不想要的图像，如下所示

class PicturesList extends React.Component { constructor(props) { super(props); this.state = { imagesarray: [] }; this.imagestore = this.imagestore.bind(this); } componentDidMount() { const img = new Image(); img.onload =() => { // image has been loaded this.imagestore() }; img.src = 'image_7.jpg'; } render() { return ( ); } imagestore() { const imgUrls=this.props.apikeys; const objarr = Object.values(imgUrls); this.setState({ imagesarray: objarr }); } }

上面的解决方案只是在加载图像后调用imageStore。但是，如果您打算在组件完全加载后调用imageStore，则只需在componentDidMount中触发this.imageStore()

class PicturesList extends React.Component { constructor(props) { super(props); this.state = { imagesarray: [] }; this.imagestore = this.imagestore.bind(this); } componentDidMount() { this.imagestore() } render() { return ( ); } imagestore() { const imgUrls=this.props.apikeys; const objarr = Object.values(imgUrls); this.setState({ imagesarray: objarr }); } }

【本文地址】

公司简介

联系我们