react ReactDOM.createPortal document is not defined

web16888

已于 2023-04-21 11:18:07 修改

阅读量496

点赞数

分类专栏： next.js react-next js 文章标签： react.js 前端 javascript

于 2023-04-21 11:09:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41211900/article/details/130283549

版权

next.js 同时被 3 个专栏收录

33 篇文章

订阅专栏

react-next

26 篇文章

订阅专栏

18 篇文章

订阅专栏

文章讲述了如何在Next.js应用中处理PC端的select组件和移动端的Picker组件的交互问题。在PC端，使用select实现下拉效果，而在移动端则用Picker，并讨论了如何利用ReactDOM.createPortal将Picker作为全局组件挂载到body上，解决弹出层级问题。遇到的documentisnotdefined错误通过条件判断window对象得以解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在写一个下拉框的组件，在pc是select，在移动端又变成Picker，在nextjs中怎么实现呢？

pc端select，有特点就是按钮在哪里，就在哪里下拉，而Picker是点击按钮，在底层弹出全屏。

实现这个功能就需要了解react在body中添加全局组件，让Picker放在最外层。

import ReactDOM from 'react-dom'
ReactDOM.createPortal(<div>aaaa</div>,document.body)

这样写报document is not defined错误！经过几番试验，调整如下：

import {  useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
export function CheckboxV2({}) {
const [isLoading, setisLoading] = useState(0)
 useEffect(() => {
        if (typeof window === "object") {
            setisLoading(1)
        }


    }, [list, current])
 return(
  <>
  {isLoading ? ReactDOM.createPortal(
                    <>
                       aaaaa
                    </>,
                    document.body
                ) : ""}
</>
)
}