是否可以在 function 中使用道具作為默認值（使用反應/解構分配規則時）

Question

我有一個 function 將val作為參數，我想將this.props.val設置為默認值。

我目前的 function：

foo(val = this.props.val) {
    console.log(val);
  }

我收到以下 lint 錯誤：

必須使用解構道具分配（react/destructuring-assignment）

是否有可能以不同的方式將 props 用作默認值，以符合react/destructuring-assignment規則？

也許有一些類似於以下的技巧？

foo({ val } = this.props) {
    console.log(val);
  }

在上面的例子中：

foo(5);// val = undefined
foo({val:5});// val = 5
foo();//val = this.props.val

預期結果

foo(5);// val = 5
foo({val:5});// val = {val:5}
foo();//val = this.props.val

[ 我可以用

foo(val) {
    const { val: valProps } = this.props;
    const newVal = val || valProps;
    console.log(newVal);
  }

但我正試圖找到一種更清潔的方式]

Answer 1

看起來您正在嘗試混合 function 接收的參數類型（發送 integer 或對象），這不是定義函數參數的常用方法。 我認為您不能直接在函數簽名中處理這種情況，但是您可以執行以下操作：

this.props = {x: 1, y: 2, val: 3}

const foo = ({ val = 'MY_DEFAULT_VALUE' } = this.props) => {
  console.log(val);
}

foo(5);  // val = MY_DEFAULT_VALUE
foo({ val: 5 });  // val = 5
foo();  //val = this.props.val

或者，如果您確實必須支持兩種類型作為參數（整數和對象），您應該處理在 function 本身中收到的參數，類似於：

this.props = {x: 1, y: 2, val: 3}

const foo = (arg = this.props) => {
  if (arg.val) {  // Check if `arg` has a `val` property (meaning that `arg` is an object)
    console.log(arg.val);
  } else {  // `arg` is not an object with `val` property, assumed we got integer or empty param
    console.log(arg);
  }

  // Or even shorter:
  newVal = arg.val || arg;
  console.log(newVal);
}

foo(5);  // val = 5
foo({ val: 5 });  // val = 5
foo();  //val = 3 (from `this.props.val`)

Answer 2

您收到一個 lint 錯誤，這並不完全是錯誤，因為它與運行時無關，而只是與代碼樣式相關的自以為是的最佳實踐。 就 javascript 而言，您的代碼似乎很好。 您可以做的是，忽略此特定行的規則，將此注釋放在您的 function, // eslint-disable-line react/destructuring-assignment或完全在您的 eslint 配置中禁用此規則，這完全取決於您的代碼樣式。