Question

我正在尝试通过react-bootstrap创建轮播，但在将其显示在页面上时遇到问题：

这是我的代码的一部分：

this.slides.map((slide, index) => ({
    <Carousel.Item >
       <Row className="item-container carousel-item d-flex flex-xl-column flex-wrap">
          {
            slide.map(category => { // slide is not defined
               return (                                            
                 <Col className="px-2 category__card" xl={category.xl} md={category.md}>
                   <Card className="p-2" style={category.style}>
                       <Card.Body>
                         <Card.Title className="text-white font-weight-normal text-uppercase ">
                           <h4>
                              category.title}
                           </h4>
                         </Card.Title>
                         <Button variant="light rounded-0" >View Products</Button>    
                      </Card.Body>
                      <div className="card-image-cont">
                         <Card.Img  src={category.img} className="card-image"/>
                      </div> 
                   </Card>  
                 </Col>
              );
            })
          }
       </Row>
    </Carousel.Item> 
 }))

您可以想象数据是这样的：

slides = [
   [
     {
       title: 'laptops',
       img: images.laptop,
       md: 6,
       xl: 3,
       style: {
         "background": "red",
         "height": "100%"
       }
     },


    {

       title: 'mobiles',
       img: images.mobile,
       md: 6,
       xl: 4,
       style: {
         "background": "#c4dd60",
         "height": "100%",
         "margin-bottom": "0.5em;"
       }
    }
 ],
 [
     {
       title: 'laptops',
       img: images.laptop,
       md: 6,
       xl: 3,
       style: {
         "background": "red",
         "height": "100%"
       }
     },


    {

       title: 'mobiles',
       img: images.mobile,
       md: 6,
       xl: 4,
       style: {
         "background": "#c4dd60",
         "height": "100%",
         "margin-bottom": "0.5em;"
       }
    }
 ]

]

我收到此错误slide is not defined，这是怎么回事？我正在遍历slides中的每个项目，以创建多个轮播项目并且每个轮播项目应包含多个类别，但不知道为什么会出现此错误。.可能是我对 JSX

不太了解

Answer 1

您的代码至少有2个问题。第一个是有一个额外的括号：day应该是this.slides.map((slide, index) => ({ ... }))。第二个是在外部this.slides.map((slide, index) => { ... })函数中不返回任何内容：map()应该为this.slides.map((slide, index) => { ... })。结果（假设您的整个代码都包装在this.slides.map((slide, index) => { return ( ... ) })方法中），您的代码将如下所示：

return()

Here是一个基于您的代码的简单示例。希望对您有帮助。

react-bootstrap轮播组件有什么问题？

1 个答案: