Question

如何访问所有反应组件的渲染树中的元素，.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上一个接一个地访问它的所有子元素，然后找到所有drawable并在任何更新被清除时缓存该对未来rafs的响应。

但如果SurfaceLayer的组成如下

<SurfaceLayer>
    <AwesomeLayer />
</SurfaceLayer>

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

我现在如何做到这一点，我为整个UI层保留了一个单身store，它保留了对所有ui元素的引用（我觉得这很糟糕），有没有更好的方法来做到这一点？

Answer 1

你需要的是对react.js流的一点点，你可以用自上而下的方式传播更新，而不必担心实际的孩子。此外，您似乎正在尝试从元素的祖先而不是从其父元素访问引用，这可能不那么容易。您可以做的是向AwesomeLayer添加引用并询问关于其子项的引用，例如向getAwesomeChildren()组件添加AwesomeLayer方法。

ReactJS - 如何获取整个渲染树

1 个答案: