React JSS（styled-jss）中如何优化hover样式的props条件判断

嘿，我完全懂你这种重复写判断的烦恼，确实挺啰嗦的！其实有两种简洁的方式可以实现只做一次props.edited判断，就能给hover样式批量应用属性：

方法一：将整个hover样式转为函数返回对象 #

把&:hover的值改成一个接收props的函数，通过一次判断返回完整的hover样式对象或者空对象：

'&:hover': props => props.edited ? {
  background: 'purple',
  cursor: 'pointer',
  // 这里可以添加其他需要的hover样式
} : {}

当edited为true时，函数会返回包含所有hover属性的对象；如果是false，就返回空对象，不会有任何hover样式生效。

方法二：利用对象扩展运算符结合条件判断 #

在hover的样式对象内部，用逻辑与的短路特性来条件扩展样式：

'&:hover': {
  ...(props.edited && {
    background: 'purple',
    cursor: 'pointer',
    // 其他hover样式
  })
}

这种方式下，只有当props.edited为true时，后面的样式对象才会被展开并合并到hover样式里；如果是false，逻辑与表达式返回false，扩展运算符会忽略它，相当于没有添加任何hover属性。

两种方法都能达到你要的效果，选哪种全看你个人的代码风格偏好啦～

内容的提问来源于stack exchange，提问作者Jayce444