为什么用 ReactDOM.render 渲染的组件会丢失 react-redux 上下文（提供者）答案

【问题标题】：Why component rendered with ReactDOM.render loses react-redux context (Provider)为什么用 ReactDOM.render 渲染的组件会丢失 react-redux 上下文（提供者）
【发布时间】：2021-07-17 03:29:18
【问题描述】：

例如，我的应用程序由 2 个部分组成，并被包裹在 Provider:

<>
  <Provider store={store}>
     <ModalWindow />
     <Main />
  </Provider>
</>

我在ModalWindow 中渲染不同的内容，为此我有配置文件：

export const modalConfig = {
  firstConfig: {
    onRender: (node, props) => {
      ReactDOM.render(<FirstComponent {...props} />, node)
    },
  },
  secondConfig: {
    onRender: (node, props) => {
      ReactDOM.render(<SecondComponent {...props} />, node)
    },
  },
 }

我的 Main 组件始终具有 react-redux 上下文，我可以使用 useSelector 或 useDispatch

但是为什么我使用 ReactDOM.render() 渲染的组件没有 react-redux 上下文？我需要额外包装它们来解决这个问题，如下所示：

export const modalConfig = {
  firstConfig: {
    onRender: (node, props) => {
      ReactDOM.render(<Provider store={store}><FirstComponent {...props} /></Provider>, node)
    },
  },
  secondConfig: {
    onRender: (node, props) => {
      ReactDOM.render(<Provider store={store}><SecondComponent {...props} /></Provider>, node)
    },
  },
}

为什么会这样？

【问题讨论】：

能否展示一下组件内容？

标签： reactjs redux react-redux provider

【解决方案1】：

您正在使用ReactDOM.render 将模式插入到文档中，因此它们会在Provider 组件的外部结束，该组件在您的根节点（可能是document.getElementById("root")）内呈现。

我不确定你为什么需要ReactDOM.render。您可能可以重新设计它，以便 ModalWindow 有条件地 returns 一些内容。您可以使用 CSS 样式将其变为叠加层。您也可以查看React Portal API。

【讨论】：