是否可以在 function 中使用道具作为默认值（使用反应/解构分配规则时）

Question

I have a function that getting val as a parameter and I want to set this.props.val as default value.

My current function:

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

I'm getting the follow lint error:

Must use destructuring props assignment (react/destructuring-assignment)

Is it possible to use props as a default value in a different way that will stand in the react/destructuring-assignment rule?

Maybe there is some trick similar to the following?

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

In the example above:

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

Expected result

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

[ I can use

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

but I'm trying to find a cleaner way]

Answer 1

It looks like you are trying to mix the type of the argument which function receives (sending integer or object) which is not the usual way to define function's parameters. I don't think you can handle such case in function's signature directly, but you could do something like this:

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

Alternatively, if you really have to support both types as an argument (integers and objects), you should handle the argument you received within the function itself, something similar to:

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

You are getting a lint error which isn't exactly an error since it isn't related to runtime but is just an opinionated best practice relating to code style. Your code seems fine with respect to javascript. What you can do is, ignore the rule for this specific line by putting this comment above your function, // eslint-disable-line react/destructuring-assignment or disable this rule entirely in your eslint config which totally depends on your code style.