Как использовать порталы в Next.js для получения дочернего элемента за пределы непосредственного родительского контейнера?

Текущая реализация

Контейнер

export const FormContainer = () => {
    return (<Form/>);
  }

Составная часть

export const Form = () => {
    return ReactDOM.createPortal(
      <aside>
        <div>{"I am a component"}<div/>
      </aside>,
      document.body
    );
  }

Ошибки

ReferenceError: документ не определен

Ожидание

Я хочу, чтобы форма находилась вне иерархии DOM FormContainer.


reactjs typescript next.js react-tsx
person Harsh Nagalla    schedule 15.04.2020    source источник
comment
привет, вы получаете эту ошибку в следующем терминале js (ваш терминал ide) или в консоли браузера?   -  person Pierfrancesco    schedule 15.04.2020
comment
@Pierfrancesco получает эту ошибку в браузере   -  person Harsh Nagalla    schedule 16.04.2020

Ответы (1)


arrow_upward
2
arrow_downward

ReferenceError: документ не определен

ReactDOM.createPortal больше похож на компонент, предназначенный только для BrowserSide, потому что ему нужен document, а в рендеринге на стороне сервера он не определен.

Я хочу, чтобы форма находилась вне иерархии DOM FormContainer.

самое простое решение: установите условие для проверки рендеринга BrowserOnly компонента createPortal:

согласно saimeunt answer, что-то вроде

export const FormContainer = () => {
    return (
        {process.browser?
            <Form/>:null
        }
    );
}

сделает день.

другой способ будет использовать nextJs динамический импорт и отключить SSR на модуле

import dynamic from "next/dynamic";
const Form = dynamic(() => import("path/to/FormModule"), { ssr: false });


export const FormContainer = () => {
    return (<Form/>);
  }
person Soren Abedi    schedule 31.01.2021