在 React js 条件渲染中使用 OR 运算符答案

【问题标题】：Using OR operator in React js conditional rendering在 React js 条件渲染中使用 OR 运算符
【发布时间】：2020-07-22 08:36:50
【问题描述】：

我想根据两个条件有条件地呈现一个按钮。我不确定这样做是否正确。

但我收到此错误 此条件将始终返回 'true'，因为类型 '"started"' 和 '"cancelled"' 没有重叠。ts(2367) em> 红色下划线所在的位置。

我正在使用 React js 和 typescript

【问题讨论】：

那么你想什么时候显示按钮？
这与React无关，是一个简单的逻辑错误。您的条件将始终为真，因为journey 将始终不同于“已开始”或“已取消”，无论它实际具有哪个值。您可能想用另一个 && 替换 ||
当 Journey !== "started" 和 Journey !== "cancelled" 为真，因为它大约有三种状态（开始、取消和停止）

标签： javascript reactjs typescript react-native

【解决方案1】：

你有一个逻辑错误。一个变量不能同时有两个值，这意味着journey !== "started" || journey !== "cancelled" 永远为真。

您可能希望使用journey === "started" 来显示取消按钮

【讨论】：

【解决方案2】：

如果您的条件只有两个选项，如“盯着”和“取消”，您可以添加三元运算符。

{journey === "stared" ? <Button>Journey Started</Button> : <Button>Journey Cancelled </Button>}

但如果有更多选项，例如 ("stared","cancelled","completed","any other")

  {journey === "stared" && <Button>Journey Started</Button> }
  {journey === "cancelled" && <Button>Journey cancelled</Button> }
  {journey === "completed" && <Button>Journey completed</Button> }

这是一个可选的东西，最好不要在条件中直接使用字符串。最好将它们定义为类型或枚举（如果使用带有 React 的打字稿）或只是成本；

const STARTED = "started"
const COMPLETED = "completed"
const CANCELED = "canceld"

const journey = STARTED // Or anything the matches with the requirement.


{journey === STARTED ? <Button>Journey Started</Button> : <Button>Journey Cancelled </Button>}

【讨论】：

【解决方案3】：

当您检查多个值时，您可以使用includes 方法进行简化

{ !["started", "cancelled"].includes(journey) && <Button> Cancel Journey </Button> }

或者

{ journey === "stopped" && <Button> Cancel Journey </Button> }

或

{ ["stopped"].includes(journey) && <Button> Cancel Journey </Button> }

【讨论】：