使用React Hooks使用Portal动画模式组件时出现问题

Question

我试图在用户打开和关闭组件时为我的模态组件设置动画。模态组件使用Portal在页面上安装和卸载，我使用react-transition-group库中的CSSTransitionGroup来为mount和unmount设置动画。

如果我为Portal使用基于类的Component，一切都按预期工作。你可以在这里看到我的完整工作示例：https://codepen.io/jeffcap1/pen/eoQZgp

以下是作为类组件的Portal代码段：

const portalRoot = document.getElementById("portal");
class Portal extends React.Component {
    constructor(props) {
        super(props);
        this.el = document.createElement("div");
    }

    componentDidMount = () => {
        console.log("Portal componentDidMount!");
        portalRoot.appendChild(this.el);
    };

    componentWillUnmount = () => {
        console.log("Portal componentWillUnmount!");
        portalRoot.removeChild(this.el);
    };

    render() {
        const { children } = this.props;
        return ReactDOM.createPortal(children, this.el);
    }
}

但是，当我尝试更改Portal组件以使用新的React Hooks API，特别是useEffect时，内容永远不会添加到页面上。你可以在这里看到完整的例子：https://codepen.io/jeffcap1/pen/YMRXxe

使用Hooks作为功能组件的Portal片段是：

const portalRoot = document.getElementById("portal");
const Portal = ({ children }) => {
const el = document.createElement("div");

React.useEffect(() => {
        console.log("Portal componentDidMount!");
        portalRoot.appendChild(el);
        return () => {
            console.log("Portal componentWillUnmount!");
            portalRoot.removeChild(el);
        };
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    return ReactDOM.createPortal(children, el);
};

我很难过，非常感谢任何有关我所做错事的见解都会非常感激。

Answer 1

好吧，它的工作原理如下：

const {useEffect, useMemo} = React;
const Portal = ({children}) => {
  const el = useMemo(() => document.createElement("div"), []);
  useEffect(() => {
    portalRoot.appendChild(el);
    return () => {
      portalRoot.removeChild(el);
    }
  }, []);
  return ReactDOM.createPortal(children, el);
}

笔：https://codepen.io/anon/pen/OGaEbw

你是在每次渲染而不是一次创建el - 这可能是问题所在，因为第二次渲染是使用未附加的el。