Куда лучше поместить модалку?

Question

[Константин Подыганов]

Допустим, есть основной компонент модалки, и используется он в разных целях - для регистрации и авторизации. Приложение максимально удобно разбито на компоненты. Сама авторизация находится в шапке сайта и модалка там же находится, просто при нажатии на "регистрация" модалка появляется.

Что-то типа:

export function Header() {
  const [modal, setModal] = useState(false);
  return (<div>
    <button onClick={setModal}>Register</button>
    {modal && <Modal>{/* ... */}</Modal>}
  </div>);
}

Адекватен ли такой подход? Может есть вариант по лучше? Например, вызывать какой-то Event и в главном App компоненте слушать и если произошло то рендерить модалку. И где об этом почитать?

Comments

[Andrey Vasilev]

как на счёт управления модалкой через store?
можно вызывать как отдельный компонент, так и какой-то один из App

[szQocks]

Адекватен ли такой подход?

- да

Может есть вариант по лучше?

- нет

[HardBot]

szQocks,

- нет

Нет, это для таких программистов как ты, а вариантов куча

[szQocks]

HardBot, ну покажи хотя бы один) ну или хотя бы на словах опиши, лучше подход)

[szQocks]

HardBot, ясно, ничего у тебя нет, жаль. Я несколько дней потратил на изучения подходов по модалкам и просто поверь мне на слово, лучше подхода нет на данный момент как вызов модального окна из самого компонента. И если тебе кажется что ты знаешь якобы лучше подход, это лишь твои фантазии, либо модалка максимально ограниченная.

[HardBot]

szQocks, та начхать мне сколько ты времени потратил, я тебе уже ответил.

НЕТ, только для такого программиста как ты, та и по твоим вопросам можно уже сделать вывод. Успокойся и иди учись))

Answer 1

[Анатолий Куликов]

Поместить можно в цело куда угодно, все зависит от того, как удобнее с этим будет работать:

• если в модалке один и тот же контент, то можно вынести куда-то в корень и управлять через некое общее состояние приложения (например, как справедливо отметили в комментариях, store)
  
• если там контент может быть разный, то возможно есть смысл вызывать её в конкретном компоненте (как в вашем случае) или же так же определить глобально, но в этом случае нужно будет все пропсы передавать туда и события нужные оттуда же перехватывать, что в целом может усложнить код без какой-то надобности
  

В данном случае уместно будет также использовать порталы.

Answer 2

[Andrey Vasilev]

Один из вариантов:

Я думаю можно подготовить условный список всех вариации модалок в массиве.
const modals = [ { type: 'auth', button: 'Войти' (или массив) }, action: 'login', {....} ], подключить в одном месте.
управлять всем этим делом соответственно в одном слайсе.

У меня так в проекте была реализована модалка по отображению тех. ошибок.
Аксиос отдавал определенную ошибку, я искал её в списке возможных и показывал соответствующую модалку с соответствующими действиями.

Пример:


Всё это дело можно расширять из одного места и как душе угодно.