使用 OR 运算符进行条件渲染

Posted 2023-02-22

【中文标题】使用 OR 运算符进行条件渲染

【英文标题】：Conditional rendering with OR operator

【发布时间】：2021-06-07 11:08:03

【问题描述】：

我有以下代码；

       
          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 运算符之间的这些条件之一，即首先放置的那个。有条件渲染的 React 中是否有 OR (||) 运算符不可用？

如果是这样，我该如何实现以下目标？例如基于 2 OR 条件渲染。

IF ABC AND GH AND ER OR DEF AND FGH AND TYU then display button

编辑

已解决。上面的代码有效，但在我期望不同值的状态集之一不匹配。

【参考方案1】：

在带有条件渲染的 React 中，OR (||) 运算符是否可能不可用？

不，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 上反应原生。

【讨论】：

这里很好奇，您介意解释一下为什么 react-native 在使用条件渲染时会崩溃吗？

@IanVasco 如果表达式中的一个值返回一个字符串，react-native 将尝试将其呈现为字符串并导致崩溃，因为字符串只能在 Text 元素中呈现。你可以在这里阅读更多关于它的信息：medium.com/dailyjs/…

好吧，那么我建议将建议作为评估所需变量的布尔值，而不是提及更广泛的“某些情况”:)

这是一个有效的观点。我将编辑答案以包含它。

这太棒了 - 感谢您的解释。完全有道理，但我不知道！

【参考方案2】：

我不确定我是否正确理解了您的问题，如果我错了，请告诉我，但我认为您缺少括号。 我认为您正在尝试渲染this.state.isWPAEnterpriseInstalled

也许你打算写以下内容：

(this.state.isWPAEnterpriseInstalled && !this.state.passpoint && !this.state.expanded) || (this.state.isWPAEnterpriseInstalled && !this.state.expanded && this.state.isEnterprise) && <TouchableOpacity>...

希望能帮到你。

【讨论】：

谢谢你 - 不，这是我自己做的。满足的两个条件都是正确的 - 我预计其中一个是错误的。现在修复了，我只是忽略了之前的一些代码。

您的回答实际上解决了我刚才遇到的另一个类似情况 :) 谢谢。

很高兴我能帮上忙 :)