我目前正在渲染一个子组件signInError
发生。这signInError
存储在父组件中,如果不为 null,则渲染<SignInError/>
组件,按照下面的代码:
父组件.js
// Some code...
render() {
return(
<div>
<SignInForm
doSignIn={this.doSignIn}
resetSignInError={this.resetSignInError}
signInError={this.state.signInError}
/>
{this.state.signInError && <SignInError/>}
</div>
);
}
到目前为止,一切顺利,这是子组件SignInError.js
import React from 'react';
import RoundImage from '../../../UI/Common/RoundImage';
import Newman from '../../../../assets/newman-min.png';
class SignInError extends React.Component {
constructor(props){
super(props);
}
componentDidMount(){
const img = new Image();
img.src = Newman;
}
render(){
return(
<div>
<div>
<RoundImage src={img.src}/> // <--- img is undefined here!!!
</div>
<div>
Hello... Newman!
</div>
</div>
);
}
}
export default SignInError;
RoundImage.js
import React from 'react';
const RoundImage = (props) => {
return (
<div>
<img src={props.src}/>
</div>
);
}
export default RoundImage;
如何在 React.js 中预加载图像? https://stackoverflow.com/questions/42615556/how-to-preload-images-in-react-js
Stack Over flow 上这个问题的答案(上面的链接)告诉我创建img
里面的物体componentDidMount()
方法强制浏览器加载它。我就这样做了,正如您从上面的代码中看到的那样。但是现在,当我尝试将它作为道具传递给我的孙子组件时render
方法,我无法访问img
,因为它是在另一个方法内部定义的。
解决这个问题的最佳方法是什么?我只需要加载图像并与错误消息一起显示。否则,如果您的浏览器尚未缓存图像,错误消息将显示在图像之前。谢谢您的帮助。
图像下载发生在浏览器中。渲染到 DOM 也发生在浏览器中。
By 预加载,您的意思是您希望组件仅在图像准备好时呈现?
如果是这样,你可以这样做:
componentDidMount() {
const img = new Image();
img.onload = () => {
// when it finishes loading, update the component state
this.setState({ imageIsReady: true });
}
img.src = Newman; // by setting an src, you trigger browser download
}
render() {
const { imageIsReady } = this.state;
if (!imageIsReady) {
return <div>Loading image...</div>; // or just return null if you want nothing to be rendered.
} else {
return <img src={Newman} /> // along with your error message here
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)