为何使用ReactDOM.render渲染的组件会丢失react-redux的Provider上下文？

核心本质：React 上下文的传递边界 #

react-redux 的 Provider 完全基于 React 原生 Context API 实现，它提供的全局 store 上下文 只会在同一棵 React 渲染树内，从顶层组件向所有后代组件逐层传递，不会跨独立渲染树共享。

为什么之前的写法无法拿到redux上下文 #

你代码中通过 ReactDOM.render(<FirstComponent {...props} />, node) 渲染弹窗内容时，这行代码会生成一棵完全独立的 React 渲染树：

• 这棵独立渲染树，和你最外层包裹全局 Provider 的根渲染树，不存在任何组件层级上的父子关系
• 上下文传递链路在独立挂载的那一刻就完全断开，自然无法继承到上层 Provider 提供的 store 数据，useSelector、useDispatch 这类依赖 Context 的Hook也就无法正常工作。

具象的层级对比：
正常能继承Context的渲染结构：
根React树 → Provider（提供store上下文） → ModalWindow组件 → FirstComponent（作为ModalWindow的直接子组件，自然能拿到上层传递的上下文）
你之前实际的渲染结构：

1. 根React树 → Provider → ModalWindow组件（组件内部仅渲染了一个空的DOM容器节点，本身没有渲染弹窗的业务内容）
2. 独立渲染树 → FirstComponent（直接挂载到上面的空DOM节点上，和根树的Provider没有任何组件层级关联）

为什么手动包裹Provider就能解决问题 #

你手动在独立渲染树的最外层包裹 Provider 并传入同一个全局store，相当于给这棵独立的渲染树单独补上了store上下文的来源，useSelector、useDispatch 自然能正常读取到对应的状态和dispatch方法。

补充说明：如果使用React官方提供的 createPortal API 将弹窗内容渲染到外部DOM节点，是不需要额外包裹Provider的——因为Portal本质还是原React渲染树的一部分，只是把DOM的渲染位置做了偏移，Context的传递链路没有断开；只有 ReactDOM.render/createRoot 这类独立挂载API，会生成完全脱离原树管控的新渲染树，才会出现Context传递断裂的问题。

内容的提问来源于stack exchange，提问作者Дядя Фея