React and Styled Component — условный стиль на основе текущей итерации

Я пытаюсь стилизовать изображения в своей галерее на основе свойств, которые есть у каждого изображения. Пока я обнаружил, что это работает:

const ImageContainer = styled.div`
  display: flex;
`

function Gallery({gallery}) {
  return (
    {gallery.map(image => {
      return (
        <ImageContainer 
          key={image.id} 
          style={{backgroundColor: (image.height > image.width) ? 'red' : 'blue'}}
        >
          <img src={image.thumb} alt="puppy" />
        </ImageContainer>
      )
    })}
  )
}

но я ищу что-то более чистое, например:

const ImageContainer = styled.div`
  display: flex;
  background-color: ${(image.height > image.width) ? 'red' : 'blue'}
`

function Gallery({gallery}) {
  return (
    {gallery.map(image => {
      return (
        <ImageContainer key={image.id}>
          <img src={image.thumb} alt="puppy" />
        </ImageContainer>
      )
    })}
  )
}

Является ли это возможным?

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
0
23
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Да, это возможно. Вам нужно передать height и width как props стилизованному компоненту -

const ImageContainer = styled.div`
  display: flex;
  background-color: ${({ height, width }) => (height > width) ? 'red' : 'blue'}
`

function Gallery({gallery}) {
  return (
    {gallery.map(image => {
      return (
        <ImageContainer key={image.id} height={image.height} width={image.width}>
          <img src={image.thumb} alt="puppy" />
        </ImageContainer>
      )
    })}
  )
}

Вы можете найти больше информации о переданных свойствах в styled-components справа здесь.

Большой!! Было бы здорово, если бы вы приняли мой ответ. Людям, наткнувшимся на вопрос, было бы легче понять его, если бы здесь был принятый ответ. @DomanskaGrzyb

himayan 17.05.2022 09:49

Конечно! Готово :)

DomanskaGrzyb 17.05.2022 11:26

Другие вопросы по теме