React和Styled组件——基于当前迭代的条件样式

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中找到更多关于传递道具的信息。