使用 React Hooks 使用 Portal 为模态组件设置动画时出现问题

Question

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

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

这是作为 Class 组件的 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

使用挂钩作为功能组件的门户片段是：

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 未附加。

使用 React Hooks 使用 Portal 为模态组件设置动画时出现问题

Issue when animating modal component with a Portal using React Hooks

reactjs

react-hooks