javascript - 覆盖现有的react.js类

标签 javascript components carousel reactjs react-bootstrap

我正在使用http://react-bootstrap.github.io/轮播组件。里面有一个 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 Prop ?我想在 EmbeddedVideo 内部监听 CarouselItem.props.active 的 Prop 更改,以确定它是否可见,如果不可见,则暂停 EmbeddedVideo 组件内的视频。

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

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

最佳答案

无论您在何处编写粘贴的 return 语句,都可以完全控制 CarouselItem 的 props。看起来您没有在 CarouselItem 上设置任何 Prop 。

如果您正在讨论 CarouselItem 的状态,则需要将回调函数作为 prop 传递给 CarouselItem,当其状态发生变化时将调用该函数,以便父组件可以做出适当的响应。

关于javascript - 覆盖现有的react.js类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26650292/

相关文章:

ruby-on-rails - Rails 友好的 DHTML 网格?

delphi - 你能帮忙把这个非常小的 C++ 组件翻译成 Delphi 吗?

javascript - Bootstrap 的轮播 (v2.3.2) 上的动画高度变化

javascript - 服务器端广播更新 PHP

javascript - 如何使此功能更精确?

javascript - 将数据库模型的整洁 json 数据从服务器(python)发送到客户端

javascript - 将 for 循环转换为 forEach 不起作用

coldfusion - Railo application.cfc this.mappings 不起作用

javascript - bootstrap4 carousel - 在 'slide.bs.carousel' 事件中停止滑动

css - 轮播中使用的图像的高度与用于容纳轮播的 div 无关