CSS转换不适用于react

Question

我正在使用react-portal来创建一个对话框并添加了转换，它进行得很好

// App.js
 return (
   <div className="App">
      <button onClick={() => setIsOpen(true)}>Click to see dialog</button>
      <PortalDialog isOpen={isOpen} setIsOpen={setIsOpen}>
        This is content of dialog
      </PortalDialog>
      {/* animation works */}
   </div>
  )

//PortalDialog.js
  return (
    <Portal>
      <DialogWrapper className={`${isOpen ? "active" : ""}`}>
        {children}
        <button onClick={() => setIsOpen(false)}>Close</button>
      </DialogWrapper>
    </Portal>
  );

直到我注意到每次渲染时都会创建PortalDialog，这是我不想要的，所以我添加了一个条件

    <div className="App">
      <button onClick={() => setIsOpen(true)}>Click to see dialog</button>
      {isOpen && (
        <PortalDialog isOpen={isOpen} setIsOpen={setIsOpen}>
          This is content of dialog
        </PortalDialog> // animation doesn't work
      )}
    </div>

现在它并不是每次都呈现出来，但是CSS转换不再工作了，我认为这是因为我添加的条件。但是我想不出用react-portal添加转换的方法，在这里我需要做什么？我做了一个这里的代码框示例。

Answer 1

看起来ReactTransitionGroup是答案，我用CSSTransition组件包装了PortalDialog组件，如它们的码箱样本中所示。

  <CSSTransition
      in={isOpen}
      timeout={300}
      classNames="dialog"
      unmountOnExit
    >
      <Portal>
        <DialogWrapper>
          {children}
          <button onClick={() => setIsOpen(false)}>Close</button>
        </DialogWrapper>
      </Portal>
   </CSSTransition>

转换现在正在工作，而不需要在每次渲染时创建。