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

Question

当前实施

容器

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

零件

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

错误

ReferenceError：文档未定义

期待

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

标签： reactjstypescriptnext.jsreact-tsx

Answer 1

ReferenceError：文档未定义

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

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

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

根据saimeunt的回答，类似

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/>);
  }