React carousel：为什么图像会进入列表视图而不是旋转木马

Question

我遇到将图像放在转盘中的问题。目前，每张图片都单独出现，而不是滑入旋转木马。

请帮我纠正我的错误。

JXS

render()
    {
        var banquetImg = this.props.IMG_BASE + this.props.RESTAURANT_BANNER_PATH
      return (
        <div className="photosSection">
          {
            this.props.banquetImageList.length != 0
            ?
              <div className="body">
                <div className="row">
                    {
                    this.props.banquetImageList.map(function (row, i)
                    { 
                      return(
                                    <Carousel showArrows={true} key={row.RestaurantAttachmentId}>
                                          <div key={row.RestaurantAttachmentId} className={"row"}>
                                            <img src={banquetImg + row.FileName} key={row.RestaurantAttachmentId}/>
                                            <p className="get-final-price">Get Final Price</p>
                                          </div>
                                        </Carousel>
                                      )
                      }, this)
                  }
                          </div>

              </div>
              :
                ""
          } 
        </div>
    );
  }

Answer 1

您应该将banquetImageList映射到Carousel，

<div className="row">
  <Carousel showArrows={true} key={row.RestaurantAttachmentId}>
     {this.props.banquetImageList.map((row, i) =>
         <div key={row.RestaurantAttachmentId} className={"row"}>
             <img src={banquetImg + row.FileName} key={row.RestaurantAttachmentId}/>
              <p className="get-final-price">Get Final Price</p>
         </div>
     )}
  </Carousel>   
</div>