React and Styled Component - 基于当前迭代的条件样式

Question

我正在尝试根据每张图片所具有的属性来为我的图库中的图片设置样式。到目前为止，我发现这是有效的：

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>
      )
    })}
  )
}

可能吗？

Answer 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 右侧 here 中找到有关传递的道具的更多信息。

React and Styled Component - 基于当前迭代的条件样式

React and Styled Component - conditional styling based on current iteration

iteration

reactjs

styled-components