1.
Роутинг внутри модалки: Можно использовать библиотеку react-router-dom даже внутри модального окна для обеспечения роутинга между различными экранами.
Создайте отдельный
<Switch> внутри модалки:
<Modal>
<Switch>
<Route path="/modal/presets" component={Presets} />
<Route path="/modal/edit/:id" component={EditPhrase} />
<Route path="/modal/create" component={CreatePhrase} />
<Route path="/modal/delete/:id" component={DeletePhrase} />
{/* ... */}
</Switch>
</Modal>
2.
Компоненты экранов: Разделите разные экраны модалки на отдельные компоненты. Это позволит упростить их управление и сделать код более читаемым.
3.
Состояние: Вместо того чтобы использовать сложную систему контекстов, можно просто использовать локальное состояние (useState) или глобальное состояние (например, с помощью redux или mobx), в зависимости от ваших потребностей.
4.
Хуки: Избегайте избыточного использования useMemo, useCallback и прочих, если нет явных причин для оптимизации. Часто избыточное использование этих хуков только усложняет код и на самом деле может замедлить приложение.
Псевдокод:
Основной компонент модалки:
function ModalComponent() {
return (
<Modal>
<Switch>
<Route path="/modal/presets" component={Presets} />
<Route path="/modal/edit/:id" component={EditPhrase} />
<Route path="/modal/create" component={CreatePhrase} />
<Route path="/modal/delete/:id" component={DeletePhrase} />
{/* ... */}
</Switch>
</Modal>
);
}
Компонент пресетов:
function Presets() {
const phrases = ... // получите фразы
return (
<div>
{phrases.map(phrase => (
<div key={phrase.id}>
{phrase.text}
<Link to={`/modal/edit/${phrase.id}`}>Редактировать</Link>
</div>
))}
<Link to="/modal/create">Создать новую фразу</Link>
</div>
);
}
Этот пример очень общий, но я надеюсь, что он даст вам представление о том, как можно структурировать ваш код. Если что-то кажется запутанным или избыточным, вероятно, так оно и есть
