我想仅在加载图像后触发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]);
但完全不知道如何实现。谢谢你。
当组件将被加载时,您不应该关心。当渲染它时,您应该关注。像这样:
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 ...;
}