javascript - ReactJS - 如何获得整个渲染树

Question

我如何访问 React 组件的渲染树中的 所有 元素，没有 .props.children 不起作用，我也不能使用 refs 。

这是我正在努力实现的一个例子。

// the following is the code inside the `render` function
// for a component called AwesomeLayer
// this.draw is the drawing function for ctx.
<LayoutLayer>
  <SomeOtherLayer>
    <Drawable onAnimationFrame={this.draw} />
  </SomeOtherLayer>
</LayoutLayer>

现在我有一个名为 SurfaceLayer 的顶级容器表面层应该在 propsChange 上一个接一个地访问它的所有子元素，然后找到所有可绘制对象并缓存该响应以供 future rafs 清除任何更新。

但是如果 SurfaceLayer 组成如下

<SurfaceLayer>
    <AwesomeLayer />
</SurfaceLayer>

我不会获得对可绘制对象的引用，因为 AwesomeLayer 节点的子节点将是未定义的。 PS 此代码可能会被其他人使用，因此我不会依赖显式引用，因为它们会导致更多错误。

我现在是如何做到的，我为整个 UI 层维护一个单例 store，它保留对所有 ui 元素的引用，(我觉得这很糟糕)，有没有更好的方法去做这个 ？

Answer 1

您需要的是稍微反对 react.js 流程，您可以在其中以自上而下的方式传播更新，而无需担心实际的 child 。此外，您似乎正在尝试从元素的祖先而不是其父元素访问 refs，这可能并不那么容易。您可以做的是添加对 AwesomeLayer 的引用并询问该 ref 关于它的 child ，例如通过添加 getAwesomeChildren() AwesomeLayer 的方法组件。