Javascript '；移动'；将组件导入门户？

我有一个渲染图像的组件，当用户单击它时，我希望它通过门户渲染，而不必重新加载当前正在发生的图像，这是一个简单的示例：

export const TestPortals = (props: any) => {
    const element = <img src="imageurl.com/image.jpg" width={100} height={100} />
    const [inPortal, setInPortal] = React.useState<boolean>(false)
    return inPortal ? ReactDOM.createPortal(element, document.getElementById("portal")) : element
}

export const TestPortals=（道具：any）=>{
常量元素=
const[inPortal，setInPortal]=React.useState（false）
return inPortal？ReactDOM.createPortal（元素，document.getElementById（“门户”））：元素
}

当状态切换到inportal=true时，映像本身将重新加载

我希望它在不发生这种情况的情况下从门户切换到渲染。

这是不可能的，“门户”意味着在根目录之外渲染React组件。 这意味着，当您更改呈现门户的状态时，React会将新的Dom元素附加到主体中

这意味着浏览器第二次渲染图像，这是浏览器的工作方式，您可以在React中执行任何操作来更改此行为。

不可能，“门户”意味着在根目录之外渲染React组件。 这意味着，当您更改呈现门户的状态时，React会将新的Dom元素附加到主体中

---

这意味着图像是由浏览器第二次渲染的，这是浏览器的工作方式，您可以采取任何措施来改变这种行为。

Facebook会以某种方式进行处理，播放的视频会转到一旁继续播放。我并不是说门户网站就是解决方案，我只是想问我如何才能达到同样的效果。Facebook使用pip（画中画）浏览器功能Facebook以某种方式做到了这一点，播放的视频会转到一边继续播放。我并不是说门户网站就是解决方案，我只是问我如何才能达到同样的效果。Facebook使用pip（画中画）浏览器功能