动态创建组件中React Context API为空的解决方案咨询

问题根源在于：你用ReactDOM.render动态创建的组件是挂载到独立DOM节点上的，形成了一棵全新的React组件树，和原来被AppContext.Provider包裹的组件树完全隔离，所以自然拿不到原上下文的数据。除了props传值，还有以下两种靠谱的解决办法：

1. 使用React.createPortal替代ReactDOM.render #

Portal能让组件渲染到DOM树的任意位置，但组件本身仍属于原React组件树的一部分，因此可以正常共享上下文。

修改后的代码示例：

// 当前子组件在Provider树内，先获取上下文
const ctx = useContext(AppContext);

// 创建挂载容器（保持原有逻辑）
const wrapper = document.createElement('div');
document.body.appendChild(wrapper);

// 用Portal替代ReactDOM.render渲染组件
ReactDOM.createPortal(
  React.createElement(Component, {
    ...props,
    proceed: (val) => {
      ReactDOM.unmountComponentAtNode(wrapper);
      document.body.removeChild(wrapper);
      resolve(val);
    },
  } as T),
  wrapper
);

2. 手动为动态组件包裹AppContext.Provider #

既然新组件树是独立的，就在渲染时手动给它套一层和原树相同的AppContext.Provider，把当前拿到的上下文值传进去。

修改后的代码示例：

// 当前子组件先获取上下文
const ctx = useContext(AppContext);

// 给动态渲染的组件套上Provider
ReactDOM.render<T>(
  React.createElement(AppContext.Provider, { value: ctx },
    React.createElement(Component, {
      ...props,
      proceed: (val) => {
        ReactDOM.unmountComponentAtNode(wrapper);
        resolve(val);
      },
    } as T)
  ),
  wrapper,
);

这两种方法都能让动态创建的组件正常获取到AppContext的数据，无需通过props层层传递。

内容的提问来源于stack exchange，提问作者Velaro