在刷新页面时，以毫秒为单位反映自定义模态显示模式内容

Question

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

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

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

这是视频链接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>
  );
};

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