Warum funktioniert der zentralisierte Rendering -Ansatz (Getloaders), aber der Split -Rendering -Ansatz scheitert bei Re ⇐ CSS

[Anonymous]

Ich habe eine React -Komponente, die eine Liste von Ladern mit einem Ratenlimit verwaltet. Lader können sich in einem von drei Staaten befinden: anhängig, aktiv oder abgeschlossen. Wenn ein Loader seine Animation abschließt, sollte der nächste anstehende Loader animieren. GetPendingloaderjsx), nur der erste Loader animiert korrekt. Die verbleibenden Lader springen auf 100% ohne Animation.

Code: Select all

const getLoaders = () => {
return Array.from({ length: loaderCount }).map((_, index) => {
if (completedLoaders.includes(index)) {
return ;
} else if (activeLoaders.includes(index)) {
return (
 handleAnimationEnd(index)}
/>
);
} else {
return ;
}
});
};

Split -Rendering (nicht funktioniert):

Code: Select all

const getCompletedLoadersJSX = () => {
return completedLoaders.map((loaderId) => (

));
};

const getActiveLoaderJSX = () => {
return activeLoaders.map((loaderId) => (
 handleAnimationEnd(loaderId)}
/>
));
};

const getPendingLoaderJSX = () => {
return pendingLoaders.map((loaderId) => (

));
};

Ich habe 2 Kommentare in app.tsx in der Return -Anweisung hinzugefügt. /> Tatsächliches Verhalten: < /strong> < /p>

Mit geteiltem Rendering animiert nur der erste Loader. Der Rest Jump
bis 100% ohne Animation. Und wie man es behebt. Bitte anzeigen Sie den Code -Link, den ich