Как предотвратить повторный рендеринг идентичного компонента в дочернем элементе? ⇐ Javascript

[Anonymous]

Я пытаюсь создать индикатор выполнения с анимацией перехода. Подумайте: многостраничный мастер, и когда вы переходите на следующую страницу, индикатор выполнения анимируется к следующему шагу.
Когда индикатор выполнения является автономным, переход работает, но когда он находится внутри страницы (которая меняется, подумайте: реагирующий маршрутизатор), переход не работает (и я подозреваю, что это потому, что компонент перерисовывается)

Код: Выделить всё

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();

Обратите внимание, что массив Pages в компоненте Pages предназначен для иллюстрации. На практике каждая страница в этом массиве представляет собой собственный компонент React, который имеет различные различия (в зависимости от того, что должен делать этот шаг мастера), но все они имеют дочерний элемент .


Подробнее здесь: https://stackoverflow.com/questions/798 ... t-in-child