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

Post a reply

Smilies
:) :( :oops: :chelo: :roll: :wink: :muza: :sorry: :angel: :read: *x) :clever:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: Warum funktioniert der zentralisierte Rendering -Ansatz (Getloaders), aber der Split -Rendering -Ansatz scheitert bei Re

by Anonymous » 04 Mar 2025, 04:23

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

Top