与深儿童反应通用容器通信

Question

我有这个案例，我试图在React中接近，但我不知道在React范式下它是否可能......

我有一个Slideshow组件和一个Slideshow组件，它们应该是UI库的一部分。 Slideshow组件管理某种特殊情况（如延迟加载），我们希望与此Slideshow无缝集成，但它需要由此Image控制（这是一个控制幻灯片在每个时刻显示的逻辑。）

问题是，<Slideshow> <Slide> <Image /> </Slide> </Slideshow> 接受任意组件用作幻灯片，因此Slide和<div> <h3>{title}</h3> <div> <div>{description}</div> <Image /> </div> </div> 之间有一个抽象层。

那是我的理由。一般性问题类似于如何将子元素与子级进行通信，这些子级可以处于任何深层次。

像

这样的东西

Image

但我们不知道Slideshow组件的结构如何。 它可能像

那样简单

Image

或者更复杂，比如没有直接使用{{1}}，而是在另一个子组件中......

所以真正的问题是......

{{1}}（父组件）是否可以检测其子项与子项之间的{{1}}组件（特定类型的组件）的实例，然后调用一些方法或重新设置任何属性，而中间元素不必实现任何东西？

如果所有幻灯片（中间组件）都需要实现一些特殊逻辑来允许这种情况（比如将特殊属性或方法传递给他们的孩子），那就会失去我们想要做的事情的意义（这是完全可能在非反应实现中，因为我们有更多的DOM控制权

Answer 1

问：幻灯片（父组件）是否可以检测其子组件与子组件子组件之间的Image组件（特定类型的组件）的实例，然后调用一些方法或重新设置任何属性，而中间元素不必实现任何东西？

A：基本上，是的，你可以，如果你管理你的幻灯片组件渲染，你可以检查组件上的children道具，你可以得到它幻灯片中的所有组件都不是那么容易，你必须开始检查里面的结构，看看你需要实现什么。

这里有一篇关于React children的好文章。

Answer 2

您可以使用React的上下文（https://reactjs.org/docs/context.html）。这基本上是唯一的“常规”解决方案。但是，在你的情况下，我可能会使用一些仅处理延迟加载的实例并将其传递到这里：

<SlideShow loader={myLazyLoader}>
  <div>
    <h3>{title}</h3>
    <div>
      <div>{description}</div>
      <Image loader={myLazyLoader}/>
    </div>
  </div>
</SlideShow>

或类似的东西。