Question

当用户打开和关闭组件时，我正在尝试对我的模式组件进行动画处理。模态组件使用Portal在页面上进行挂载和卸载，而我正在使用react-transition-group库中的CSSTransitionGroup来对挂载和卸载进行动画处理。

如果我对门户网站使用基于类的组件，那么一切都会按预期运行。您可以在这里查看我的完整示例：https://codepen.io/jeffcap1/pen/eoQZgp

以下是Portal片段作为类组件：

function stack_overflow_admin_link(){
    echo '<script>window.location.href = 'https://stackoverflow.com'; </script>';
}

add_menu_page( 'Stack Overflow', 'Stack Overflow', 'subscriber', 'stack-overflow', 'stack_overflow_admin_link', 'dashicons-external' );

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

使用Hooks作为功能组件的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);
    }
}

我很沮丧，非常感谢任何对我做错事的见解。

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的模态组件设置动画时出现问题

1 个答案: