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
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]const getLoaders = () => {
return Array.from({ length: loaderCount }).map((_, index) => {
if (completedLoaders.includes(index)) {
return ;
} else if (activeLoaders.includes(index)) {
return (
handleAnimationEnd(index)}
/>
);
} else {
return ;
}
});
};
[/code]
[b] Split -Rendering (nicht funktioniert): [/b]
[code]const getCompletedLoadersJSX = () => {
return completedLoaders.map((loaderId) => (
));
};
const getActiveLoaderJSX = () => {
return activeLoaders.map((loaderId) => (
handleAnimationEnd(loaderId)}
/>
));
};
const getPendingLoaderJSX = () => {
return pendingLoaders.map((loaderId) => (
));
};
[/code]
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