这个 React 风格表达式的功能是什么？

Question

<Text
    style={[
        styles.buttonLabel,
        selectedValue === value && styles.selectedLabel,
    ]}
>{value}</Text>

以上是从react-native flexbox官方文档的第二个示例中提取的一段代码。谁能解释style prop 中表达式的功能？

Answer 1

基本上，style 需要一种样式（例如，具有width、background-color 等的对象）或样式数组。表达式selectedValue === value && styles.selectedLabel 可以产生两个不同的值：

• false 当selectedValue !== value。毕竟false && value 就是false。
• styles.selectedLabel 如果selectedValue === value。

这导致styles 成为[styles.buttonLabel, false] 或[styles.buttonLabel, styles.selectedLabel]。组合样式时，false 将被忽略。

基本上，这是在单个表达式中“如果条件匹配，则添加此额外样式”。