我们真的需要反应门户吗

Question

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

但我无法完全理解为什么我们不把这个模型组件放在同一个层次结构树中，而是放在它的顶部并使其渲染取决于我们从react context或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" />

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