将组件“移动”到门户中？

Question

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

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
}

当状态切换到 inportal = true 时，图像本身会重新加载。

我希望它切换到从门户呈现而不会发生这种情况。

Answer 1

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

这意味着图像被浏览器第二次渲染，这就是浏览器的工作方式，你可以在 React 中做任何事情来改变这种行为。