覆盖现有的 react.js 类

Question

我正在使用http://react-bootstrap.github.io/ Carousel 组件。里面有一个 CarouselItem 组件，所以看起来像这样：

        return (
          <Carousel>
            <CarouselItem key={obj.src1}>
              <EmbeddedVideo provider={obj.provider1} videoId={obj.src1} />
            </CarouselItem>
            <CarouselItem key={obj.src2}>
              <EmbeddedVideo provider={obj.provider2} videoId={obj.src2} />
            </CarouselItem>
            ...
          </Carousel>
        );

一切正常，但如何获得 CarouselItem 道具？我想在 EmbeddedVideo 内监听 CarouselItem.props.active 的道具变化，以确定它是否可见，如果不可见，则暂停 EmbeddedVideo 组件内的视频。

我相信我可以在 CarouselItem 渲染方法中创建 EmbeddedVideo 并传递它的 active 道具，但我不想复制粘贴整个 CarouselItem 来仅添加一个元素。

那我该如何修改呢？或者还有其他方法可以用 CarouselItem 控制 EmbeddedVideo？

Answer 1

无论您在何处编写粘贴的返回语句，都可以完全控制 CarouselItem 的属性。看起来您没有在 CarouselItem 上设置任何道具。

如果您在谈论CarouselItem 的状态，则需要将回调函数作为道具传递给CarouselItem，该道具将在其状态更改时被调用，以便父组件能够做出适当的响应。