React组件内获取调用深度：嵌套SceneNode节点层级获取方案问询

解决方案 #

你之前使用Context未达到预期是因为走入了「每个节点单独创建Context」的误区，只需全局复用同一个Context即可实现零侵入的深度自动计算：

1. 先创建全局深度Context

import { createContext, useContext, ReactNode } from 'react';

const SceneNodeDepthContext = createContext(0);

2. 实现SceneNode组件

function SceneNode({ children }: { children: ReactNode }) {
  // 读取上层父节点传递的深度
  const parentDepth = useContext(SceneNodeDepthContext);
  // 当前节点深度为父级深度+1，根节点默认深度为1
  const currentDepth = parentDepth + 1;

  // 这里可以拿到当前节点的深度做业务逻辑
  console.log('当前SceneNode嵌套深度：', currentDepth);

  // 将当前深度传递给下层所有子SceneNode
  return (
    <SceneNodeDepthContext.Provider value={currentDepth}>
      <div>{children}</div>
    </SceneNodeDepthContext.Provider>
  );
}

效果验证

你给出的嵌套示例对应的深度输出为：

• 最外层<SceneNode>：深度1
• 两个内层<SceneNode>：深度2

如果需要自定义根节点的起始深度（比如要求根节点深度为0），只需在最外层手动传入初始值即可：

<SceneNodeDepthContext.Provider value={-1}>
  <SceneNode>
    {/* 嵌套的子节点 */}
  </SceneNode>
</SceneNodeDepthContext.Provider>

方案说明

该方案全程复用同一个Context实例，不存在你之前遇到的动态创建Context无法被子组件访问的问题，不需要手动传参、不需要操作DOM，完全符合React的设计规范，容错率为100%。

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