Reactjs 如何对道具值进行多次检查以更改该值的颜色。样式的内部={}？

我正在尝试建立一个应用程序，列出要完成的任务。在这些任务中，优先级为1-5。我已经实现了一个解决方案，如果数字的值超过2，则将该数字的颜色从绿色更改为黄色。但是我也希望数字变为红色，如果它的值正好是5。如何做到这一点

以下是PrioLvl组件的代码，该组件是该功能应发生的位置

import { View, Text, Image, ScrollView, TextInput, StyleSheet } from 'react-native';

class PrioLvl extends React.Component {
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.container}>
                <Text style={this.props.prio > 2 ? styles.yellow : styles.green}>{this.props.prio}</Text>
            </View>
        ) 
    }
}


const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        width: 100,
    },
    green:{
        fontSize: 50,
        color: '#5cb85c'
    },
    yellow:{
        fontSize: 50,
        color: '#f0ad4e'
    },
    red: {
        fontSize: 50,
        color: '#d9534f'
    }

    
});


export default PrioLvl;

从'react native'导入{视图、文本、图像、滚动视图、文本输入、样式表}；
类PrioLvl扩展了React.Component{
建造师（道具）{
超级（道具）
}
render（）{
返回(
2？styles.yellow:styles.green}>{this.props.prio}
) 
}
}
const styles=StyleSheet.create({
容器：{
对齐项目：“居中”，
为内容辩护：“中心”，
宽度：100，
},
绿色：{
尺寸：50，
颜色：“#5cb85c”
},
黄色：{
尺寸：50，
颜色：“#f0ad4e”
},
红色：{
尺寸：50，
颜色：“#d9534f”
}
});
导出默认优先级；

您可以将逻辑分解为助手方法：

import { View, Text, Image, ScrollView, TextInput, StyleSheet } from 'react-native';

class PrioLvl extends React.Component {
    constructor(props){
        super(props)
    }

    getStyle = () => {
       if (this.props.prio === 5) return 'red'
       if (this.props.prio > 2) return 'yellow'
       return 'green' 
    }
    render(){
        const style = this.getStyle()
        return (
            <View style={styles.container}>
                <Text style={styles[style]}>{this.props.prio}</Text>
            </View>
        ) 
    }
}


const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        justifyContent: 'center',
        width: 100,
    },
    green:{
        fontSize: 50,
        color: '#5cb85c'
    },
    yellow:{
        fontSize: 50,
        color: '#f0ad4e'
    },
    red: {
        fontSize: 50,
        color: '#d9534f'
    }

    
});


export default PrioLvl;

从'react native'导入{视图、文本、图像、滚动视图、文本输入、样式表}；
类PrioLvl扩展了React.Component{
建造师（道具）{
超级（道具）
}
getStyle=（）=>{
如果（this.props.prio==5）返回“red”
如果（this.props.prio>2）返回“黄色”
返回“绿色”
}
render（）{
const style=this.getStyle（）
返回(
{this.props.prio}
) 
}
}
const styles=StyleSheet.create({
容器：{
对齐项目：“居中”，
为内容辩护：“中心”，
宽度：100，
},
绿色：{
尺寸：50，
颜色：“#5cb85c”
},
黄色：{
尺寸：50，
颜色：“#f0ad4e”
},
红色：{
尺寸：50，
颜色：“#d9534f”
}
});
导出默认优先级；

---

或者，您可以在

style={}

属性内将多个三元运算符链接在一起。但我认为上述方法更容易阅读。

非常好的解决方案，非常感谢！