2016-03-01 50 views
1

因此,需要從服務器獲取數據(圖像),並使用引導傳送帶在頁面上呈現它們。但是,當我渲染圖像時,傳送帶彼此堆疊在一起,不會在頁面上水平分佈,而是垂直分佈。我想知道爲什麼?也許是我的coloumns引導佈局什麼的?或者我將樣式傳遞給對象,以便它顯示像內嵌塊?有沒有辦法讓它們像網格一樣水平分佈?在網格中顯示React引導傳送帶

const ImageCarousel = React.createClass({ 

getInitialState(){ 
return null 
}, 

componentWillMount() { 
    this.props.fetchDiscovery() 
}, 

renderImages(images) { 
    var output = images.map((image) => { 
    return(
     <CarouselItem > 
      <img wdith={900} height={500} style={style.carousel} src={image.url} /> 
      <h3>Heya world</h3> 
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> 
     </CarouselItem> 

    ) 
    }); 
    return (
    <Col md={4}> 
     <Carousel> 
     {output} 
     </Carousel> 
     </Col> 
) 

}, 

renderData(item) {  

    return (
    <div> 
     <Grid> 
     <Row> 
      {item.content.userData.firstName} 
      {this.renderImages(item.content.medias)} 
     </Row> 
    </Grid> 
    </div> 
    ) 
}, 

    render() { 
    return (
     <div> 
     {this.props.discover.map(this.renderData)} 
     </div> 
    ) 
    } 
}) 

var style = {}; 

style.carousel= { 
    marginTop: '50', 
    display: 'inline-block' 
} 

function mapStateToProps({ discover }) { 
    return { discover } 
} 

    function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ fetchDiscovery },dispatch); 
} 
export default connect(mapStateToProps, mapDispatchToProps)(ImageCarousel); 

回答

0

我解決了這個通過移動轉盤到它自己的單獨的部件,並通過將數據從上到下爲道具,每個傳送帶然後在柵格渲染