javascript - 检查颜色是否为字符串 ('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 不适用于 react native。还有其他推荐吗？

看起来无效的颜色也有超过 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()}} />
)