reactjs - React Portal 未在功能组件中生成子级

Question

我有简单的反应门户组件。首先，我在类组件中编写了这个，一切都很好。但我决定将其重写为功能组件。在此门户仅在 div#portal 内部生成 div 而在内部没有子级之后。我不知道哪里出错了。

// Functional Component

import React, { useEffect } from 'react';
import { createPortal } from 'react-dom';

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

  useEffect(() => {
    portalRoot.appendChild(el);

    return () => portalRoot.removeChild(el);
  }, []);

  return createPortal(children, el);
};

export default Lightbox;

// Class component

// import { Component } from 'react';
// import ReactDOM from 'react-dom';

// const portalRoot = document.getElementById('portal');

// export default class Lightbox extends Component {
//   constructor() {
//     super();
//     this.el = document.createElement('div');
//   }

//   componentDidMount = () => {
//     portalRoot.appendChild(this.el);
//   };

//   componentWillUnmount = () => {
//     portalRoot.removeChild(this.el);
//   };
//   render() {
//     const { children } = this.props;
//     return ReactDOM.createPortal(children, this.el);
//   }
// }

Answer 1

您const el = document.createElement('div');在每次更新时都创建了（因为它在 main 函数中），这是错误的。在 Class 组件中，您只在其中创建了一次，constructor()所以每次它都在同一个组件中，div但在您的功能组件中，它在每次渲染/更新时都会发生变化。

你可以保持el这样的useRef()：

const el = useRef(document.createElement('div'));并将其用作el.current