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

Question

我想根据两个条件有条件地渲染按钮。 我不太确定自己是否做对了。

但是我收到此错误 ，因为类型“” started””和“” cancelled”'没有重叠，所以此条件将始终返回“ true”。ts（2367） 红色下划线所在的位置。

我正在使用与打字稿反应js

Answer 1

您有一个逻辑错误。变量不能同时具有两个值，这意味着journey !== "started" || journey !== "cancelled"将始终为true。

您可能想使用journey === "started"来显示“取消”按钮

Answer 2

如果您的条件中只有两个选项（例如“已加注星标”和“已取消”），则可以添加三元运算符。

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

但是，如果有更多选项，例如（“已注视”，“已取消”，“已完成”，“其他”）

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

这是可选的，最好的做法是不要在条件中直接使用字符串。最好将它们定义为类型或枚举（如果将Typescript与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>}

Answer 3

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

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

或者

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

或

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