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

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 中做任何事情来改变这种行为。