如何在 Next.js 中使用门户获取直接父容器之外的子元素？

Posted 2023-03-06

【中文标题】如何在 Next.js 中使用门户获取直接父容器之外的子元素？

【英文标题】：How to use portals in Next.js in getting the child element outside the immediate parent container?

【发布时间】：2020-07-28 05:34:38

【问题描述】：

当前实施

容器

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

组件

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

错误

ReferenceError: 文档未定义

期待

我希望表单脱离 FormContainer DOM 层次结构。

【问题讨论】：

嗨，您是在下一个 js 终端（您的 ide 终端）还是在浏览器控制台中收到此错误？

@Pierfrancesco 在浏览器上收到此错误

【参考方案1】：

ReferenceError: 文档未定义

ReactDOM.createPortal 更像是一个“仅限浏览器端”组件，因为它需要document，而在服务器端渲染中，它是未定义的。

我希望表单脱离 FormContainer DOM 层次结构。

最简单的解决方案： 设置条件以检查 createPortal 组件的 BrowserOnly 渲染：

根据saimeunt answer，类似

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

会成功的。

另一种方法是使用 nextJs dynamic import 并在模块上禁用 s-s-r

import dynamic from "next/dynamic";
const Form = dynamic(() => import("path/to/FormModule"),  s-s-r: false );


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