如何将带有 chakra ui Portal 组件的任何组件传输到 dom 节点？

问题描述

如果在我的 index.html 文件中，有一个带有 "modal-should-be-appended-here" id 的 div 标签：

<div id="modal-should-be-appended-here"></div>

默认情况下，chakra UI 的 Portal 将附加在 document.body 的末尾

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

<Portal>This text is portaled at the end of document.body!</Portal>

如何将此文本传送到 <div id="modal-should-be-appended-here"></div> 而不是 document.body？

编辑：我知道可以与 ref 一起使用，但是组件应该专门传送到 <div id="modal-should-be-appended-here"></div> 中的 index.html

解决方法

实现这一目标的最简单方法

1. 将您的 div 包裹在 HTML 中以使用 let usersub = try identityProvider.getUserSub().get() 来响应组件，例如： React.forwardRef

ModalShouldBeAppendedHere.tsx

2. 在您的主要组件或您想要使用的地方 import React from "react"; export const ModalShouldBeAppendedHere = React.forwardRef((props,ref) => (<div ref={ref} id="modal-should-be-appended-here"/>)); 创建您想要在组件之间共享的参考

ModalShouldBeAppendedHere

3. 使用像const modalRef = React.createRef();这样的包装组件

4. 使用 <ModalShouldBeAppendedHere ref={modalRef} /> 和 Portal 道具

containerRef

关于引用的更多信息：https://reactjs.org/docs/forwarding-refs.html