EM
Если тебе нужно узнать, что лоадабл загрузился
Size: a a a
2019 August 03
EM
Прокинь в него колбек и вызови на дид маунт
S
Прокинь в него колбек и вызови на дид маунт
да маунт компонента происходит до того, как компонент загрузится полностью на стороне клиента
EM
Такого не может быть
S
Вот у меня есть HomePage с тремя картинками, надо, чтобы сначала загрузилась картинка1, потом картинка2, потом картинка3. если я делаю динамический импорт картинки2 и картинки 3, то после того как картинка1 прогрузится, сразу же маунтится картинка2 и, не дожидаясь полной загрузки картинки, маунтится картинка3
S
и соответственно при маунте картинки2 я не знаю как узнать, что она загрузилась полностью, так как нет реакции при ее полной загрузке, только вначале при маунте
S
Такого не может быть
Проблема в том, что динамический импорт отдает промис резолв и сразу же вызывает следующий импорт, хотя предыдущий хоть и ответил 200ым статусом, но загрузка на стороне клиента при низкой скорости инета еще не завершилась
EM
Прокинь в динамические компоненты колбеки
S
Прокинь в динамические компоненты колбеки
прокинул, но они их же можно вызвать только при маунте, как тогда отследить, что он целиком загрузился на клиенте?
EM
Покажи лучше код)
S
import React, { useEffect, useState } from 'react';
import Header from '../../elements/Header';
const Home = () => {
const [renderAbout, setRenderAbout] = useState(false);
const [renderAdv, setRenderAdv] = useState(false);
const [renderReq, setRenderReq] = useState(false);
const imoportAbout = async () => {
const { default: Hello } = await import('./HomeAbout');
setRenderAbout(<Hello />);
const { default: Hello1 } = await import('./HomeAdvantages');
setRenderAdv(<Hello1 />);
const { default: Hello3 } = await import('../../elements/RequestForm');
setRenderReq(<Hello3 />);
};
useEffect(() => {
imoportAbout();
}, []);
return (
<div className="homePageBox">
<Header headerClass="headerBox_main" />
{renderAbout}
{renderAdv}
{renderReq}
</div>
);
};
export default Home;S
идентичен с next/dynamic
import React from 'react';
import dynamic from 'next/dynamic';
import Header from '../../elements/Header';
const HomeAbout = dynamic({
loader: () => import('./HomeAbout'),
loading: () => <p>LOADING</p>,
ssr: false,
});
const HomeAdvantages = dynamic({
loader: () => import('./HomeAdvantages'),
loading: () => <p>LOADING</p>,
ssr: false,
});
const RequestForm = dynamic({
loader: () => import('../../elements/RequestForm'),
loading: () => <p>LOADING</p>,
ssr: false,
});
const Home = () => {
return (
<div className="homePageBox">
<Header headerClass="headerBox_main" />
<HomeAbout />
<HomeAdvantages />
<RequestForm />
</div>
);
};
export default Home;
EM
useEffect(() => {
imoportAbout();
}, [imoportAbout]);
imoportAbout();
}, [imoportAbout]);
EM
Вынеси динамические компоненты из основного
EM
Рендери их в рендер функции родителя
EM
Прокидывая колбеки
S
Не понятно(
S
Куда их вынести?
EM
А вот второй пример выгляди ок
EM
Он не работает?