刷新页面

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