Question

因此我从服务器获取数据（图像），并使用页面上的引导轮播渲染它们。然而，当我渲染图像时，旋转木马堆叠在一起并且不会在页面上水平展开，而是垂直展开。我想知道为什么？也许我的引导布局coloumns或东西？或者我将样式传递给对象，以便它显示像和内联块？有没有办法让它们像网格一样水平展开？

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

Answer 1

我通过将轮播移动到它自己的单独组件来解决这个问题，并将数据作为道具传递下来，然后每个轮播以网格形式呈现

在网格

1 个答案: