javascript - 刷新页面时响应自定义模态显示模态内容毫秒

Question

我建立了一个反应自定义模式。通过单击打开按钮 showModal 变为真，使显示块和关闭按钮使显示不显示。

但是我在刷新页面时注意到了一个错误，模式的内容在屏幕上显示了几毫秒。

这是我的应用程序的重要功能之一。

这是视频链接https://youtu.be/A6CUmSzwobY

和

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

如果有人能指出问题以及如何解决，我将不胜感激。

标签： javascriptcssreactjsmodal-dialogreact-modal

Answer 1

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