React Portal 不在功能组件中生成子项

Question

我有简单的 React 门户组件。首先，我在 class 组件中编写了它，并且一切正常。但我决定将其重写为功能组件。在此门户之后，仅在 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');（因为它在主函数中），这是错误的。在 Class 组件中，你只在 constructor() 中创建了一次，所以每次它都在同一个 div 中，但在你的功能组件中，它在每个 render/update 上都会发生变化.

您可以将 el 与 useRef() 保持一致，例如：

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

React Portal 不在功能组件中生成子项

React Portal not generating children in functional component

reactjs

react-portal

react-functional-component