如果样式组件中悬停状态的条件始终采用“else”值答案

【问题标题】：If condition in hover status in styled-component always takes the "else" value如果样式组件中悬停状态的条件始终采用“else”值
【发布时间】：2021-05-06 22:57:42
【问题描述】：

我一直在使用 rick and morty api 开发一个项目，遇到了一个奇怪的问题。基本上，我无法在样式组件的条件下正确使用“道具”；它总是在第一个“else”中取值即使条件正常工作（我 console.log 我的条件并且没有问题；它正确输入每个条件）

让我进一步解释一下......

这是要在我的 styled-components 文件中使用的 isAlive 道具：

<StatusDot isAlive={data.status} />

这些是属于 StatusDot 组件的样式：

export const StatusDot = styled.span`
    display: inline-block;
    height: .8rem;
    width: .8rem;
    
    background: none;
    border-radius: 50%;

    transition: .8s background ease;
    transition-delay: 0s;
    
    
    ${CharacterCard}:hover & {
        background: ${(props) => (props.isAlive === "Alive" ? "rgb(85, 204, 68)" : "rgb(214, 61, 46)")};
        transition-delay: .8s;
    }
`;

每当我将鼠标悬停在 CharacterCard 上时，即使我的 props.isAlive 为“Alive”，它也始终采用 else 块中的 RGB 代码。当我写一个嵌套的 if 检查时，同样的问题再次发生；它总是在 else 块中选择 RGB 代码。

这是我写的嵌套代码：

background: ${props => props.isAlive === "Alive"
     ? "rgb(85, 204, 68)" : 
     props.isAlive === "Dead" ? "rgb(214, 61, 46)" : "black"};

任何帮助表示赞赏。

【问题讨论】：

我已经对此进行了测试，并且逻辑对我来说很好，您确定props.isAlive 的值是您所期望的吗？由于如果值只是一个字符，则您正在匹配字符串，因此它总是以 else 结尾。它会解释你正在经历的行为。 Simplified example.

标签： css reactjs if-statement styled-components react-props

【解决方案1】：

你的 span 是否期待 isAlive 属性？如果 prop 未定义，则定义为 false

export const StatusDot = styled.span<{isAlive: 'Alive' | 'Dead' | 'unknown' }>``

【讨论】：