检查颜色是否为字符串（'white' === color? // true, 'bright white gold' === color? // false）

Question

我有多个来自数据库的颜色字符串。对于每种颜色，我将其转换为小写，然后通过内联样式传递：

const color-picker-item = color => (
    <View style={{backgroundColor: color.toLowerCase()}} />
)

当传递的颜色是有效的 css 颜色字符串（如“RED”和“WHITE”）时，这工作得很好，但现在我得到了只是显示为默认白色的时髦颜色字符串。有没有办法改变这个默认颜色，所以如果颜色不是有效的字符串颜色，那么显示这个其他颜色。

我检查了this solution out，但它使用了new Option.style，它不适用于本机反应。还有其他推荐吗？

看起来无效的颜色有超过 1 个字，所以我可以做一个空白检查，但希望有另一个解决方案！

Answer 1

只是一个想法。

您可以做的事情是创建有效颜色列表并检查该颜色是否为有效颜色，否则设置为红色或您喜欢的任何颜色。您可以使用默认颜色创建变量，或将其放在有效颜色列表的第一个索引中并将其用作默认值。

const awesomeColors = ['RED', 'GREEN', 'BLUE']

const isAwesomeColor = colorToCheck => 
     awesomeColors.some(color => color === colorToCheck) 


const color-picker-item = color => (
    <View style={{backgroundColor: isAwesomeColor(color) ? color.toLowerCase() : awesomeColors[0].toLowerCase()}} />
)

Answer 2

这可以通过多种方式解决。我能想到的最干净的方法是根据所有有效的颜色关键字检查颜色。但是，如果您只想在失败时设置默认颜色，还有一种更简单的方法。

CSS！只需添加一个类名，例如

<View className='defaultcolorfallback'/>

并将其添加到您的 css 中：

.defaultcolorfallback {
  background-color: #123456;
}

只要提供的背景颜色失败，它就会回退到设置的背景颜色。

如果你不想碰你的 css，并且你不介意把所有的 hackytackity 弄脏，这样做：

<View style={{background: '#123456', backgroundColor: color.toLowerCase()}} />

它不漂亮，但它有效！