2014-10-30 142 views
0

我正在使用http://react-bootstrap.github.io/ Carousel組件。在內部,有一個CarouselItem成分,所以它看起來像這樣:覆蓋現有的react.js類

 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組件內暫停視頻。

我相信我可以創建EmbeddedVideo insidie CarouselItem呈現方法,並在那裏傳遞它的活動道具,但我不想複製粘貼整個CarouselItem以僅添加一個元素。

那麼我該如何修改它?或者還有其他一些方法可以通過CarouselItem控制EmbeddedVideo?

回答

1

無論你寫什麼,你粘貼的返回語句都可以完全控制CarouselItem的道具。看起來你沒有在CarouselItem上設置任何道具。

如果你在談論CarouselItem的狀態,你需要傳遞一個回調函數CarouselItem作爲一個道具,當它的狀態改變時它會被調用,以便父組件可以做出適當的響應。