React编程式渲染组件时如何传递上层React树的Context上下文

这里提供两种可落地的方案，你可以根据自己的业务场景选择：

方案一：手动透传Context封装渲染函数（适用于少量Context的场景） #

核心逻辑是在触发渲染Dialog的组件中先拿到当前所有需要透传的Context值，再把目标Dialog组件用对应Context的Provider逐层包裹后再执行渲染，就能让Dialog获取到上层的Context值。
示例代码如下：

// 1. 提前定义需要透传的所有Context集合
const GLOBAL_CONTEXTS = [ThemeContext, UserContext, RouterContext] as const;

// 2. 自定义Hook，获取当前组件树中所有Context的实时值
const useAllContextValues = () => {
  return GLOBAL_CONTEXTS.map(Context => ({
    Context,
    value: React.useContext(Context)
  }));
};

// 3. 封装带Context的渲染方法
const renderWithContext = (
  Component: React.FC,
  contextValues: ReturnType<typeof useAllContextValues>,
  container: HTMLElement
) => {
  let wrappedComponent = <Component />;
  // 从内到外逐层包裹Provider
  for (const { Context, value } of contextValues.reverse()) {
    wrappedComponent = (
      <Context.Provider value={value}>
        {wrappedComponent}
      </Context.Provider>
    );
  }
  ReactDOM.render(wrappedComponent, container);
};

// 4. 在触发弹窗的组件中使用
const TriggerComponent = () => {
  const contextValues = useAllContextValues();
  const handleClick = () => {
    const container = document.createElement('div');
    document.body.appendChild(container);
    renderWithContext(Dialog, contextValues, container);
  };
  return <button onClick={handleClick}>打开弹窗</button>;
};

注意：该方案如果遇到Context值更新，渲染的Dialog不会自动同步最新值，需要额外加订阅逻辑适配，更适合Context变动少的场景。

方案二：全局Portal动态队列（最推荐，适配所有场景） #

你提到的Portal必须写在return里的限制，完全可以通过全局动态队列的方式绕开，不需要提前声明每个Dialog实例，完全支持点击后动态渲染，而且天然支持所有上层Context透传，不需要手动处理Context逻辑，符合React的正常渲染链路。
示例代码如下：

// 1. 定义全局Portal根组件，放在根ContextProvider的内部
const GlobalDialogPortal = () => {
  const [dialogQueue, setDialogQueue] = useState<{id: string, node: React.ReactNode}[]>([]);

  // 把打开/关闭方法挂载到全局对象，也可以用事件总线代替全局挂载
  window.openDialog = (dialogNode: React.ReactNode) => {
    const id = Math.random().toString(36).slice(2);
    setDialogQueue(prev => [...prev, {id, node: dialogNode}]);
    // 返回关闭方法
    return () => setDialogQueue(prev => prev.filter(item => item.id !== id));
  };

  // 渲染到body节点下
  return React.createPortal(
    <>
      {dialogQueue.map(item => <React.Fragment key={item.id}>{item.node}</React.Fragment>)}
    </>,
    document.body
  );
};

// 2. 在你的根组件中引入该组件，确保它在所有Provider的内部
const App = () => {
  return (
    <ThemeContext.Provider value="FooBar">
      <UserContext.Provider value={userInfo}>
        {/* 其他业务组件 */}
        <GlobalDialogPortal />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
};

// 3. 任意位置触发弹窗，不需要提前声明
const AnyComponent = () => {
  const handleClick = () => {
    // 直接调用全局方法打开弹窗，Dialog可以正常拿到所有上层Context
    const close = window.openDialog(<Dialog onClose={close} />);
  };
  return <button onClick={handleClick}>打开弹窗</button>;
};

该方案没有额外的Context同步成本，所有React生命周期、Hook逻辑都可以正常运行，也支持多弹窗堆叠、动态销毁等需求，适配绝大多数复杂业务场景。

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