问题描述
{
this.state.isWPAEnterpriseInstalled && !this.state.passpoint && !this.state.expanded || this.state.isWPAEnterpriseInstalled && !this.state.expanded && this.state.isEnterprise && <TouchableOpacity style={!this.state.expanded ? [styles.button,{ backgroundColor: this.state.primary_color }] : [styles.expandedButton,{ backgroundColor: this.state.primary_color }]}
activeOpacity={0} onPress={this.removeConfigEnterprise}>
<Text allowFontScaling={false} style={styles.button_text}>Remove WPA </Text>
</TouchableOpacity>
}
我遇到的问题是条件渲染线;
this.state.isWPAEnterpriseInstalled && !this.state.passpoint && !this.state.expanded || this.state.isWPAEnterpriseInstalled && !this.state.expanded && this.state.isEnterprise &&
就好像它只识别 OR 运算符之间的这些条件之一,即先放置的条件。是否有可能 OR (||) 运算符在带有条件渲染的 React 中不可用?
如果是这样,我怎样才能实现以下目标?例如基于 2 OR 条件渲染。
IF ABC AND GH AND ER OR DEF AND FGH AND TYU then display button
编辑
已解决。上面的代码有效,但在我期望不同值的状态集之一中存在不匹配。
解决方法
我不确定我是否正确理解了您的问题,所以如果我错了,请告诉我,但我认为您在那里缺少括号。
我认为您正在尝试呈现 this.state.isWPAEnterpriseInstalled
也许你想写以下内容:
(this.state.isWPAEnterpriseInstalled && !this.state.passpoint && !this.state.expanded) || (this.state.isWPAEnterpriseInstalled && !this.state.expanded && this.state.isEnterprise) && <TouchableOpacity>...
希望能帮到你。
,OR (||) 运算符在条件渲染的 React 中是否可能不可用?
不,JSX 应该接受任何 JavaScript 表达式。
如果是这样,我怎样才能实现以下目标?例如基于 2 OR 条件渲染。
IF ABC AND GH AND ER OR DEF AND FGH AND TYU then display button
&&
用于条件渲染的简写方式解释如下:
https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
之所以有效,是因为 true && VALUE
总是返回 VALUE
,在这种情况下它是要呈现的元素。
但是当我们在它们之间添加 OR 运算符时,它返回的是布尔值而不是元素。
要解决此问题,您需要将整个语句括在括号中。
并且您可能需要考虑使用内联 if-else 语句,因为当使用此技术与非布尔值(例如字符串)时,由于文本在 Text
之外呈现,因此反应原生 can crash元素。