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);