javascript - react 通用容器与深层 child 的沟通

Question

我有这个案例，我正尝试在 React 中处理，但我不知道在 React 范式下它是否有可能...

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

问题是，Slideshow接受任意组件用作幻灯片，因此 Slideshow 之间有一个抽象层和 Image .

这就是我的情况。一个一般性的问题类似于如何与 child 沟通一个元素，这个元素可以处于任何深度。

有点像

<Slideshow>
  <Slide>
    <Image />
  </Slide>
</Slideshow>

但我们不知道Slide的结构如何组件将是。 它可能是一些简单的东西，比如

<div>
  <h3>{title}</h3>
  <div>
    <div>{description}</div>
    <Image />
  </div>
</div>

或更复杂，例如不使用 Image直接，但在另一个子组件中......

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

Slideshow 有可能吗？ (父组件)检测 Image 的实例组件(一种特定类型的组件)在它的子组件和子组件的子组件之间，然后调用一些方法或重新设置任何属性，而不需要中间元素实现任何东西？

如果所有的幻灯片(中间组件)都需要实现一些特殊的逻辑来允许这样做(比如将一个特殊的属性或方法传递给它们的 child )，它就失去了我们想要做的事情的意义(这是在非 react 实现中完全可能，因为我们对 DOM 有更多的控制)

Answer 1

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

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

或者类似的东西。