我们真的需要反应门户吗

Question

我知道，如果我们想在页面中的任何其他内容之上弹出模型组件，那么当我们尝试在渲染的层次结构树之外添加组件时，我们可能想要使用 React Portal

但是我不能完全理解为什么我们不把这个模型组件放在同一个层次结构树中而是放在它的顶部并让它渲染取决于我们从反应上下文或 redux

function App(){
  const showModel ; //variable we get from redux or react context
   return (<>
    {showModel? </Model>:""}
    <div id="main"></>
    </>)

}

Answer 1

你是对的。严格来说，如果您可以管理必要的样式以使其他组件在正确的位置呈现，您可能永远不必使用门户。但是门户网站可以使它变得容易得多 - 有了它们，其他容器的现有样式以及它周围的所有内容将 继续工作 当您的组件插入其中时，很少甚至没有你的调整。将模式放在其他 React 代码旁边（根据 DOM 层次结构），例如

<Model />
<div id="main" />

可能可行，但如果模态框所需的视觉位置与 DOM 中已存在的元素相同，则可能需要一些复杂的逻辑。门户网站有时会使事情变得容易得多。（有时它们根本无济于事，例如当 <Model /> 不需要相对于现有元素定位时）

我们真的需要反应门户吗

do we really need react portal

javascript

reactjs

redux