带三元运算符的 CSS - 仅在一种情况下设置属性

Question

我在我的CSS中使用react native Platform API作为三元运算符。例如，我正在设置高度：height: Platform.OS === 'ios' ? 40 : 50,但是，有时我想在一种情况下设置属性，但在另一种情况下不设置属性：height: Platform.OS === 'ios' ? 40 : <Don't set height>实现此目的的正确逻辑是什么？

Answer 1

我使用的方法是制作2个样式组件：

const styles = StyleSheet.create({

  withHeight: {

    color: 'red',

height:40

  },

withoutHeight:{

color:'red'

}

});

因此，在您的组件中，您可以执行以下操作：

<View style={Platform.OS =='ios'?styles.withHeight:styles.withoutheight}>

希望它有帮助。随时存疑

Answer 2

您可以编写另一个三元运算符，如下所示

height: Platform.OS === 'ios' ? 40 : Platform.OS === 'android' ? 50 : 0

Answer 3

如果不想设置显式值，可以：

1） 仅有条件地添加高度属性：

if (Platform.OS === 'ios') {

  styles.height = 40;

}

2） 使用未定义的值：

height: Platform.OS === 'ios' ? 40 : undefined,