React中如何将ThemeContext传递给createRoot渲染的组件？

你用createRoot创建的是一个独立的React根实例，它和App组件所在的根上下文树完全隔离，所以Test组件无法访问到上层的ThemeContext。下面提供两种可行的解决方法：

方法一：在新根中手动复用上下文值 #

既然Container组件本身处于ThemeContext.Provider的覆盖范围内，可以先在Container里获取上下文值，然后在createRoot渲染时，给Test组件重新包裹一层ThemeContext.Provider，把拿到的上下文值传递进去：

import { useContext, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

const Test = () => {
  const context = useContext(ThemeContext);
  console.log(context); // 现在能正常获取上下文
  return <div />;
};

const Container = () => {
  // 先在Container中获取上层传递的ThemeContext值
  const themeContextValue = useContext(ThemeContext);

  useEffect(() => {
    const placeholder = document.querySelector('#placeholder');
    const root = createRoot(placeholder);
    
    root.render(
      // 重新包裹Provider，复用上层的上下文值
      <ThemeContext.Provider value={themeContextValue}>
        <Test />
      </ThemeContext.Provider>
    );

    // 清理函数：组件卸载时销毁独立根
    return () => root.unmount();
  }, [themeContextValue]); // 上下文更新时重新渲染

  return null;
};

const App = () => {
  return (
    <ThemeContext.Provider value={{ mode: 'dark', primaryColor: '#2c3e50' }}>
      <Container />
    </ThemeContext.Provider>
  );
};

方法二：尽量避免使用独立根（推荐） #

如果业务场景允许，尽量不要创建独立的React根，而是用React原生方式管理组件渲染。比如把目标容器作为ref，直接在Container的JSX中渲染Test：

import { useRef } from 'react';

const Container = () => {
  const placeholderRef = useRef(null);

  return (
    <div ref={placeholderRef}>
      {/* 直接渲染Test，自动继承上层上下文 */}
      <Test />
    </div>
  );
};

这种方式下Test会自动继承上层的ThemeContext，不需要额外处理，是更符合React设计理念的做法。

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