如何使用 JavaScript+React 处理条件运算符？

Posted 2023-02-23

【中文标题】如何使用 JavaScript+React 处理条件运算符？

【英文标题】：How to handle a conditional operator w JavaScript+React?

【发布时间】：2019-09-30 22:10:21

【问题描述】：

我有以下 javascript：

const  inverseDirection  = this.props;

如果 inverseDirection 为假，我需要以下内容：

const dashOffset =
  dashArray - (dashArray * this.state.percentProgress) / 100;

如果 inverseDirection 为真，我需要以下内容：

const dashOffset =
  dashArray + (dashArray * this.state.percentProgress) / 100;

在不重复整行的情况下优雅地编写代码的正确方法是什么？

【参考方案1】：

你可以试试这个：

const  inverse  = this.props;

let calc = (x, y) => (x * y) / 100

let offset = arr + (inverse ? -1 : 1)*(calc(arr, this.state.percentProgress))

通过这种方式，您可以提取/重用 calc 函数（或移至 utils 等），inverse 操作归结为简单的 inverse ? -1 : 1，这就是您真正想要的。

【参考方案2】：

你可以的

const dashOffset = inverseDirection 
? ( dashArray + (dashArray * this.state.percentProgress) / 100) 
: (dashArray - (dashArray * this.state.percentProgress) / 100)

不是那么优雅，但任何更复杂的东西都会浪费时间，而且可能不太可读。