如何在react中有条件地延迟加载动态导入?

Question

我想仅在加载图像后触发react组件的动态导入，以优先考虑第一幅画。问题是，它是一个上下文提供程序组件，因此遇到了一些麻烦。

在文件auth.js:

中进行动态导入

const AuthContextPreloader = hasWindow
? lazy(() => import("./AuthContextPreloader"))
: null;

我在这里有一个单独的组件:

<img
ref={() => hasWindow && imageLoaded()}
className={styles.optionsImageImg}
alt={"nav"}
src={didLoad && thumb.jpg}
type="image/jpeg"
/>

加载后，发送状态上传到组件树，下传到AuthContextPreloader

const imageLoaded = () => {
setheroLoaded(true);
};

一些伪代码试图在auth.js中实现这一点:

useEffect(() => {
props.heroLoaded && **trigger the lazyload**;
}, [props.heroLoaded]);

但完全不知道如何实现。谢谢你。

Answer 1

当组件将被加载时，您不应该关心。当渲染它时，您应该关注。像这样:

const AuthContextPreloader = hasWindow
? lazy(() => import("./AuthContextPreloader"))
: null;
function ComponentWhereWouldBeRenderedAuthContextPreloader(props) {
return props.heroLoaded ? <Suspense><AuthContextPreloader /> </Suspense> : null;
}

这样你就不会认为自己是内部的，而会呈现你当前的应用状态。

编辑

从注释中可以清楚地看出，您关心的不是组件本身，而是它的依赖关系。

在这种情况下，你可以这样做:

function ComponentWhereWouldBeRenderedAuthContextPreloader(props) {
return props.heroLoaded ? <AuthContextPreloader /> : null;
}
function AuthContextPreloader(props) {
let [dependencyState, setDependencyState] = useState("not_loaded");
useEffect(function () {
import("large-dependency")
.then(function (module) {
// return either default, or named exports that you need, or skip this step
return module.default;
})
.then(function (dep) {
// do something with dependency and then change state
setDependencyState("loaded");
});
}, []);
if (depenencyState === "not_loaded") return null;
return ...;
}