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

Question

我正在尝试在 React 中制作一个支持嵌套组件的场景图。类似于以下内容：

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

当SceneNode安装 a 时，我需要一种方法让它知道它的“深度”。组件中是否有访问该信息的方法？例如：

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>
}

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

• 上下文：如果不让每个节点创建自己的上下文，就无法让它工作，但是由于在 React 中静态引用了上下文，我无法从子节点访问动态创建的父上下文。
• Refs：组件的嵌套应该反映在它们产生的 DOM 元素中，但我不知道如何确定给定 DOM 元素的关联组件是什么 - 即这个 div aSceneNode还是只是一个随机 div？（我想我可以将它编码为一个属性或 id，但我希望有一些更清洁和更少侵入性的东西）
• 手动：我可以手动指定哪些节点是父节点（例如<SceneNode parent={true}/>，但这很容易出错。

标签： reactjsdepthscenegraph

Answer 1

可以为此使用上下文：Demo