获取 React 组件内部的调用深度

Question

我正在尝试在 React 中制作一个支持嵌套组件的场景图。大致如下：

<SceneNode>
  <SceneNode>
    <Thing/>
  </SceneNode>
  <SceneNode>
    <Thing/>
  </SceneNode>
</SceneNode>

当挂载 SceneNode 时，我需要一种方法让它知道它的“深度”是多少。组件中有没有办法访问该信息？例如：

function SceneNode({children}:{children:ReactNode}) {
  const depth = useCallDepth(); // <- some magic function that lets me know the level of nesting for this node
  return <div>{children}</div>
}

注意：我尝试了以下方法：

Context：如果每个节点都创建自己的上下文，就无法让它工作，但是由于在 React 中静态引用了上下文，我无法访问动态创建的 parent 来自 children.
Refs: 组件的嵌套应该体现在它们产生的DOM个元素上，但是我想不通怎么判断关联的组件是什么对于一个给定的 DOM 元素——也就是说，这个 div 是一个 SceneNode 还是一个随机的 div？（我想我可以在属性或 ID 中对它进行编码，但我希望有一些更干净、侵入性更小的东西）
手动：我可以手动指定哪些节点是 parents（例如 <SceneNode parent={true}/>，但这很容易出错。

Answer 1

可以为此使用上下文：Demo

获取 React 组件内部的调用深度

Get Call Depth Inside React Component

scenegraph

depth

reactjs