Блог

Главная - Вопросы по программированию - reactjs — показывать диалоговое окно на всех страницах с помощью компонента кнопки, где бы он ни был включен

reactjs — показывать диалоговое окно на всех страницах с помощью компонента кнопки, где бы он ни был включен

#javascript #reactjs #material-ui

Вопрос:

В моем react приложении у меня есть заголовок с кнопкой показать диалоговое окно.
Этот компонент заголовка включается по мере необходимости во все страницы.

Моя текущая логика отображения диалогового окна заключается в следующем:

  • Когда пользователь нажимает кнопку, я отправляю действие в redux хранилище { type:SHOW_DIALOG } , и позволяю родительскому компоненту обработать изменение состояния и нарисовать диалоговое окно. Я использую material-UI съемный компонент ящика.

Обработайте событие щелчка кнопкой мыши в компоненте заголовка…

  const handleClick = () => {
    /*
     * temporary bypass surgery to avoid going through login dialog
     * dispatch({type:'SHOW_CONTACT_INFO'})
     * return;
     */
    if (!isLoggedIn)  dispatch({type: 'SHOW_LOGIN_DLG'})
    else router.push('/my-account')
  }

На родительской странице, где содержится заголовок…

 // ...other code
   <Container>
    {/* Whether or not to show the login dialog . */}
    {loginProcessState>=1 amp;amp; loginProcessState<=7
       ?<LoginDialog type={loginProcessState===1?"login":"otp"} />
       : null}
    {/* if contact edit dialog is set to show, show it. */}
    {contactEditDisplay? <ProfileEditDialog />:null}
   </Container>
  );

Но, поскольку у меня много страниц (около 10 страниц и рендеринг на стороне сервера с помощью NextJS), мне придется повторить управление состоянием на всех тех страницах, где должен отображаться диалог.

Извините за мою неосведомленность здесь. Можно ли избежать проверки состояния этого диалогового окна в родительском компоненте / странице. Если да, то как я могу это сделать?

Комментарии:

1. Ваша цель — отобразить LoginDialog их на всех страницах, если определенные проверки верны… это правда? Вы думали о том, чтобы сделать это LoginDialog с помощью корневого <App/> компонента? А затем с помощью React.useContext вы можете вызвать это dispatch в различных компонентах для запуска loginProcessState . Имеет ли это смысл?

2. Я запускаю отправку из компонента заголовка по щелчку мыши. Но страницы, которые включают, должны знать, что они должны проверить состояние login_show, а затем показать (или не показать) диалоговое окно. Не так ли?

3. Или вы хотите сказать, что я должен сделать эту регистрацию _app.js? Это выглядит как хорошая идея. Я пытаюсь это сделать…

4. Хорошо, дай мне знать, как все пройдет.

5. Это работает. Мне больше не нужно помещать управление состоянием на каждой странице !!!

Ответ №1:

Предложение:

  • Переместите LoginDialog компонент вверх и визуализируйте его непосредственно в корневом <App/> компоненте.
  • А затем используйте React.useContext для вызова этого dispatch в различных компонентах для запуска loginProcessState .

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

Метки: ,