У нас есть многослойная структура, в основном ее можно описать как:
Компонент -> Страница -> HO C
При изменении свойств на странице страница будет отображаться другой Компонент, примерно так:
class Component ....
...
render() {
switch (this.props.requestReducer.currentAction) {
case NEW_BOOKING:
node = <CustomerForm />;
break;
case SEA_EXPORT:
node = <SeaExportForm />;
break;
default:
node = <BookingList />;
break;
}
return(
<div className="container">
<Head>
<title>Booking</title>
</Head>
{ node }
</div>
)
}
export default connect(state => state, { afterFetch })(menuWrapper(authWrapper(BookingPage)));
И затем у нас есть два HO C, отвечающих за проверку аутентификации и задачи генерации меню заголовка и т. д. c.
Затем мы встречаем Проблема, когда мы переключаем реквизиты, компонент может отображаться правильно, но не в правильном положении. Скажем, если исходный компонент длиннее одного экрана страницы, а второй компонент также длиннее одного экрана, то второй экран будет отображаться из средней части, а не сверху, как ожидалось. Кажется, что переключатель запомнит позицию последнего компонента и, кажется, он также пропустит поле, определенное в menuWrapper HO C.
Есть ли у кого-нибудь такая же проблема, как у меня?