Реагирование пользовательского модального отображения модального содержимого в течение миллисекунд при обновлении страницы - PullRequest
Новая
       38

Реагирование пользовательского модального отображения модального содержимого в течение миллисекунд при обновлении страницы

0 голосов
/ 27 февраля 2019

Я построил реагирующий пользовательский модал.При нажатии на кнопку «Открыть» showModal становится истинным, что делает блок дисплея, а кнопка «Закрыть» делает отображение пустым.

Но я заметил ошибку при обновлении страницы, содержание модальных показов на экране в течение миллисекунд.

Это одна из важных функций моего приложения.

Вот ссылка на видео https://youtu.be/A6CUmSzwobY

и

codepen link https://codepen.io/alligatorio/pen/aYzMKL?editors=0100

Буду благодарен, если кто-то может указать на проблемуи как ее решить.

1 Ответ

0 голосов
/ 27 февраля 2019

Вы можете return null, если модальное окно закрыто.Таким образом, модал добавляется в DomTree только в том случае, если он должен быть открытым. 

const Modal = ({ handleClose, show, children }) => {

  // If the modal is closed, return null
  if (!show) {
    return null;
  }

  // Modal is open, render it
  return (
    <div className={'modal display-block'}>
      <section className='modal-main'>
        {children}
        <button
          onClick={handleClose}
        >
          Close
        </button>
      </section>
    </div>
  );
};

Codepen: https://codepen.io/anon/pen/drojdr?editors=0111

...