刷新页面时反应自定义模态显示模态内容几毫秒

Question

我构建了一个 React 自定义模态框。通过单击打开按钮 showModal 变为 true 使显示块和关闭按钮使显示 none.

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

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

这是视频link https://youtu.be/A6CUmSzwobY

和

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

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

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>
  );
};

代码笔：https://codepen.io/anon/pen/drojdr?editors=0111

刷新页面时反应自定义模态显示模态内容几毫秒

React custom modal display modal content for milliseconds while refreshing page

javascript

css

reactjs

modal-dialog

react-modal