javascript - 如何在 React JS 组件中预加载图像？

Question

当 signInError 时我正在渲染一个子组件发生。 signInError存储在父组件中，如果它不为空，则呈现 <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;

How to preload images in React.js?

Stack Over 流程​​上的这个问题的答案(上面的链接)告诉我创建 img componentDidMount() 中的对象强制浏览器加载它的方法。正如您从上面的代码中看到的那样，我也这样做了。但是现在，当我尝试将它作为 Prop 传递给我的 render 中的孙子组件时方法，我无法访问 img ，因为它是在另一个方法内部定义的。

解决这个问题的最佳方法是什么？我只需要加载图像并与错误消息一起显示。否则，如果您的浏览器尚未缓存图像，则错误消息将显示在图像之前。感谢您的帮助。

Answer 1

图像下载发生在浏览器中。呈现到 DOM 也发生在浏览器中。

通过预加载，您的意思是您希望组件仅在图像准备就绪时呈现吗？

如果是这样，你可以这样做:

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
  }
}