当出现signInError
时,我当前正在渲染一个子组件。如果signInError
不为null,则会在父组件中存储,然后渲染<SignInError/>
组件,如下面的代码所示:
ParentComponent.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;
这个问题的答案(链接如上)告诉我要在componentDidMount()
方法内创建img
对象以强制浏览器加载它。因此,正如您从上面的代码中可以看到的那样,我已经这样做了。但是现在,在我的render
方法中尝试将其作为prop传递给我的孙子组件时,我无法访问img
,因为它是在另一个方法内定义的。
有什么好的解决方法吗?我只需要加载图像并与错误消息一起显示。否则,如果您的浏览器还没有缓存它,错误消息将在图像之前显示。谢谢帮助。
<RoundImage src={Newman}/>
? - Diodeus - James MacFarlane