React中如何使用createPortal实现跨层级共享响应式组件？

问题根因 #

你的代码失效的核心原因是 useEffect(() => {setPortalComponent(x)}, []) 的依赖数组为空，仅会在 LowerInHierarchy 初次挂载时执行一次，后续 value 变化生成的新 x 节点永远不会同步到上下文，上层组件拿到的始终是初始状态的静态节点快照，自然无法响应更新。

最优方案：使用 createPortal #

这正是 React 内置 createPortal 的设计场景，完全匹配你的三个核心诉求：

• 状态依旧保存在下层的 LowerInHierarchy 内部，不需要做状态提升
• 组件直接绑定本地状态，不需要额外透传 props
• 可以渲染到 DOM 树的任意位置，状态响应性完全和原位置渲染一致

你可以改造代码如下：

1. 首先在上层组件预留 portal 挂载的容器

const HigherInHierarchy = ({children}) => {
  return <div>
    <p>Higher in hierarchy</p>
    {/* 预留portal挂载节点 */}
    <div id="portal-root"></div>
    {children}
  </div>
}

2. 改造下层组件，用 createPortal 渲染组件到指定容器

import { createPortal } from 'react-dom';

const LowerInHierarchy = () => {
  const [value, setValue] = useState('middle');

  // 定义绑定本地状态的组件
  const SyncInput = () => (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  )

  return <div>
    <p>Lower in hierarchy</p>
    {/* 原位置渲染 */}
    <SyncInput />
    {/* 同步渲染到上层预留节点，状态完全同步 */}
    {createPortal(<SyncInput />, document.getElementById('portal-root'))}
  </div>
}

这个方案不需要额外维护上下文，状态响应性完全由 React 内部保证，不会出现不同步的问题，性能也远优于上下文传递节点的方案。

上下文方案的修复方式 #

如果你坚持用原有上下文的实现思路，只需要修正 useEffect 的依赖项，把 x 加入依赖数组即可：

useEffect(() => {
  setPortalComponent(x);
}, [x])

但该方案存在明显缺陷：每次状态变化都会触发上下文所有消费者重渲染，组件逻辑复杂后很容易出现性能问题，也容易因为依赖遗漏出现状态不同步的bug，更推荐用 createPortal 实现。

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