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()对象，以强制浏览器加载它。从上面的代码可以看到，我做到了。但是现在，当我尝试将其作为道具传递给render方法中的孙子组件时，我无法访问img，因为它是在另一种方法中定义的。

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

Answer 1

图像下载在浏览器中进行。渲染到DOM也发生在浏览器中。

通过预加载，您是否意味着要让组件仅在图像准备好后才呈现？

如果是这样，您可以执行以下操作：

private def promoteEmployee(employee: Employee): Option[Manager] =
  if (employee.getExperience > 5) {
    Option(new Manager(employee))
  } else {
     None
  }

private def promotedEmployees(employees: Iterable[Employee]): Set[Manager] =
  employees.flatMap(promoteEmployee).toSet  // NB: might not work if Manager doesn't obey the equality contract...

private def processEmployeePromotion(employees: List[Employee]): Unit = {
  saveNewManagers(promotedEmployees(employees.asScala).toArray)
}

Answer 2

有些不同的方法，但是如果您事先有图像源，则可以将图像源作为带有预加载选项的链接引用添加到主html文件中。浏览器将预加载图像（优先级相对较低），并且在您的应用加载图像时，应将其缓存在浏览器内存中。

<head>
..
..
<link rel="preload" href="<your_image_source_here>" as="image">
...
</head>

在这种方法中，我们将预加载过程与代码分开。当您预先拥有图像源（而不是动态地）并且不需要缓存大量图像时（在html头中添加大量链接列表会有些混乱，尽管它具有更多相关性）可能）

您可以在此处了解有关链接预加载的更多信息：Preloading content with rel="preload"

Answer 3

在我的例子中，我从图像的初始 src 属性开始，并希望在图像被浏览器加载后延迟更改它们，所以我在 Typescript 中编写了以下钩子： >

import { useEffect, useState } from 'react';

export const useImageLoader = (initialSrc: string, currentSrc: string) => {
  const [imageSrc, _setImageSrc] = useState(initialSrc);

  useEffect(() => {
    const img = new Image();
    img.onload = () => {
      _setImageSrc(currentSrc);
    };
    img.src = currentSrc;
  }, [currentSrc]);

  return [imageSrc];
};

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

3 个答案: