Wie kann verhindert werden, dass identische Komponenten im untergeordneten Element erneut gerendert werden? ⇐ JavaScript

[Anonymous]

Ich versuche, einen Fortschrittsbalken mit einer Übergangsanimation zu erstellen. Denken Sie an einen mehrseitigen Assistenten, und wenn Sie zur nächsten Seite wechseln, wird der Fortschrittsbalken zum nächsten Schritt animiert.
Wenn der Fortschrittsbalken eigenständig ist, funktioniert der Übergang, aber wenn er sich innerhalb einer Seite befindet (die sich ändert, denken Sie an: React-Router), funktioniert der Übergang nicht (und ich vermute, das liegt daran, dass die Komponente neu gerendert wird)

Code: Select all

body {
margin: 0;
padding: 0;
}

#root {
padding: 0.25em 0.5em;
display: flex;
flex-direction: column;
row-gap: 1em;
}

.progress {
width: 100%;
background-color: rgb(0, 0, 104);
position: relative;
}

.progress .text {
color: #fff;
padding: 0.25em 1em;
text-align: center;
position: relative;
}

.progress .graphic {
width: 100%;
height: 100%;
}

.progress .graphic::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
max-width: var(--progress);
transition: max-width 0.5s linear;
background-color: rgb(72, 72, 255);
}

.buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 1em;
}

.buttons button {
flex-grow: 1;
}






const Progress = (props) =>

{props.step} / {props.maxSteps} = {(100 * props.step / props.maxSteps).toFixed(0)}%
;

const Pages = (props) => {
const Pages = [...Array(props.pages + 1).keys()].map((i) => () => 
{/* Might have arbitrary content here */}

{/* Might have arbitrary content here */}
)
const Page = Pages[props.page];
return ;
};

const MyApp = () => {
const [step, setStep] = React.useState(0);
const maxSteps = 6;
return (
Transition works:

Transition doesn't work:


 setStep(s => s > 0 ? s - 1 : s)}
disabled={step -
 setStep(s => s < maxSteps ? s + 1 : s)}
disabled={step >= maxSteps}
>+

);
}

ReactDOM.createRoot(document.getElementById('root')).render();

Beachten Sie, dass das Array „Pages“ in der Komponente „Pages“ nur zur Veranschaulichung dient. In der Praxis ist jede Seite in diesem Array eine eigene React-Komponente, die verschiedene Unterschiede aufweist (je nachdem, was dieser Assistentenschritt tun soll), aber alle haben ein untergeordnetes -Element.