React Portal не генерирует дочерние элементы в функциональном компоненте

У меня есть простой компонент портала реакции. Сначала я написал это в компоненте класса, и все работает очень хорошо. Но я решил переписать это в функциональную составляющую. И после этого портал генерирует только div внутри портала 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);
//   }
// }

reactjs react-functional-component react-portal
person itsnotmikhael    schedule 24.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы создаете const el = document.createElement('div'); при каждом обновлении (потому что он находится в основной функции), и это неправильно. В компоненте Class вы создали его только один раз внутри constructor(), поэтому каждый раз, когда он находится в том же div, но в вашем функциональном компоненте, он меняет себя при каждом рендеринге / обновлении.

Вы можете оставить el с useRef(), например:

const el = useRef(document.createElement('div')); и используйте его как el.current

person Emad Emami    schedule 24.06.2020