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

Question

我有以下 JavaScript:

const { inverseDirection } = this.props;

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

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

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

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

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

Answer 1

你可以做到

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

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

Answer 2

你可以试试这个：

const { inverse } = this.props;

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

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

这样您就可以 extract/reuse calc 函数（或移动到 utils 等）并且 inverse 操作归结为一个简单的 inverse ? -1 : 1这才是你真正想要的。

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

How to handle a conditional operator w JavaScript+React?

javascript

operators

ternary-operator

reactjs