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上一個接一個地訪問它的所有子元素，然后找到所有drawable並在任何更新清除后為未來的raf緩存該響應。

但是如果SurfaceLayer的組成如下

<SurfaceLayer>
    <AwesomeLayer />
</SurfaceLayer>

我不會引用drawable，因為AwesomeLayer節點的子節點將是未定義的。 PS此代碼可能被其他人使用，因此我不會依賴顯式引用，因為它們會導致更多錯誤。

我現在如何做到這一點是我為整個UI層保留了一個單獨的store ，它保留了對所有ui元素的引用（我感覺很糟糕），有沒有更好的方法來做到這一點？

Answer 1

你需要的是對react.js流的一點點，你可以用自上而下的方式傳播更新，而不必擔心實際的孩子。 此外，您似乎正在嘗試從元素的祖先而不是從其父元素訪問引用，這可能不那么容易。 您可以做的是向AwesomeLayer添加一個引用並詢問有關其子代的引用，例如通過向AwesomeLayer組件添加getAwesomeChildren()方法。