что не так в этом компоненте Карусель реакции-начальной загрузки? - PullRequest
Новая
       15

что не так в этом компоненте Карусель реакции-начальной загрузки?

1 голос
/ 18 июня 2019

Я пытаюсь создать карусель с помощью response-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

1 Ответ

2 голосов
/ 18 июня 2019

Ваш код имеет как минимум 2 проблемы.Первый - это дополнительная скобка: this.slides.map((slide, index) => ({ ... })) должно быть this.slides.map((slide, index) => { ... }).И второе: вы ничего не возвращаете в своей внешней функции map(): this.slides.map((slide, index) => { ... }) должно быть this.slides.map((slide, index) => { return ( ... ) }).В результате (при условии, что весь ваш код заключен в метод return()), ваш код будет выглядеть следующим образом: 

this.slides.map((slide, index) => {
    return (
     <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> 
)})

Здесь - простой пример, основанный на вашем коде.Надеюсь, это поможет вам.

...