如何使用Chakra UI的Portal组件将元素挂载到指定DOM节点？

Chakra UI 的 Portal 组件提供了 container 属性，专门用于自定义挂载的目标容器节点，你可以直接传入 index.html 中定义的指定 id 的 DOM 节点即可，无需绑定组件 ref。

基础用法（客户端渲染场景直接可用） #

如果你是纯客户端渲染的项目，指定 id 的 div 预先定义在 index.html 中，在组件渲染时该节点已经存在，可以直接传入获取到的节点：

import { Portal } from "@chakra-ui/react"

// 在你的组件中直接使用
<Portal container={document.getElementById("modal-should-be-appended-here")}>
  该内容将被挂载到id为modal-should-be-appended-here的div下
</Portal>

兼容SSR/避免节点不存在报错的写法 #

如果是服务端渲染（比如Next.js等框架），或者存在组件渲染早于目标节点加载的场景，可以通过 useEffect 在组件挂载后再获取目标节点，避免报错：

import { useState, useEffect } from 'react'
import { Portal } from "@chakra-ui/react"

function YourCustomComponent() {
  const [targetContainer, setTargetContainer] = useState<HTMLElement | null>(null)

  useEffect(() => {
    // 组件挂载后再获取DOM节点，确保节点存在，同时规避SSR环境无document的问题
    setTargetContainer(document.getElementById("modal-should-be-appended-here"))
  }, [])

  // 未获取到目标容器时暂不渲染Portal
  if (!targetContainer) return null

  return (
    <Portal container={targetContainer}>
      该内容将被挂载到id为modal-should-be-appended-here的div下
    </Portal>
  )
}

内容的提问来源于stack exchange，提问作者Jason M