Реагируйте условно, возвращая сопоставленный элемент bootstrap на основе длины массива - PullRequest
Новая
       33

Реагируйте условно, возвращая сопоставленный элемент bootstrap на основе длины массива

0 голосов
/ 17 апреля 2020

Я создаю страницу проекта, где я отображаю React Bootstrap Карусель изображений для каждого проекта из массива изображений. Это работает нормально, но проблема в том, что если в массиве только одно изображение, я бы не хотел, чтобы появлялись стрелки «следующий» и «предыдущий». Поэтому я попытался условно вернуть Carousel.Item, когда длина массива больше 1, и обычное изображение в противном случае (не внутри тегов Carousel.Item). Но поскольку он все еще находится внутри самой Карусели, он думает, что это еще одна горка Карусели, и появляются стрелки. Я подозреваю, что неверно выложен троичный оператор, но любая другая конфигурация, которую я пробовал, приводила к ошибке «Неожиданный токен». 

<Carousel>
  {imageArray.map((image, id) => { 
    return imageArray.length > 1 ?

  <Carousel.Item key={image.id}>
    <div className='project-image'>
      <img src={ image} style={{width: "80%"}} alt={title.rendered}/>
    </div>
  </Carousel.Item>
  
  :
  
  <div className='project-image'>
    <img src={ imgUrl} style={{width: "80%"}}alt={title.rendered}/>
  </div>
  })}
</Carousel>

Ответы [ 2 ]

0 голосов
/ 17 апреля 2020

Возможно, вы захотите сохранить свои функции отображения карусели снаружи в const, затем проверить длину, чтобы условно изменить ее значение, а затем ввести значение {images}. 

const carousel = imageArray.map((image, id) => {
<Carousel>
  <Carousel.Item key={image.id}>
    <div className='project-image'>
      <img src={ image} style={{width: "80%"}} alt={title.rendered}/>
    </div>
  </Carousel.Item>
</Carousel>
}

const default = (<div className='project-image'>
    <img src={ imgUrl} style={{width: "80%"}}alt={title.rendered}/>
  </div>)

const images = imageArray.length > 1 ? carousel : default 


return (
{images} 
)
0 голосов
/ 17 апреля 2020

Вы можете переместить троичный оператор выше Carousel и вернуть карусель, если ваш массив длиннее единицы, а в другом случае - статическое c изображение.

На мой взгляд, это имеет больше смысла как правило, вы проверяете длину массива для каждой итерации элемента. Однако вам действительно нужно сделать это только один раз.

Вот обновленный код: 

{imageArray.length > 1 ?
  <Carousel>
     {imageArray.map((image, id) => (     
       <Carousel.Item key={image.id}>
         <div className='project-image'>
           <img src={ image} style={{width: "80%"}} alt={title.rendered}/>
         </div>
       </Carousel.Item>
     ))}
   </Carousel>
  :
  <div className='project-image'>
    <img src={ imgUrl} style={{width: "80%"}}alt={title.rendered}/>
  </div>
}

Возможно, вам придется изменить стили .project-image разделить немного, чтобы учесть тот факт, что он больше не обернут Carousel.

...