ES6 деструктурировать до "этого" - PullRequest
2 голосов
/ 19 сентября 2019

Попытка разрушения ES6.

Я использую этот код в конструкторе класса React:

let { class, ...rest } = props;

Приведенный выше код работает.Но мне нужны переменные в this.class и this.rest.

У меня есть этот код, и он работает:

let { classes, ...rest } = props; 
this.classes = classes; 
this.rest = rest; 

Я ищу что-то вроде этого:

{ this.classes, ...this.rest } = props;  

Ответы [ 2 ]

4 голосов
/ 19 сентября 2019

Вы можете использовать свойства переименования, хотя, к сожалению, это требует небольшого повторения:

({ classes: this.classes, ...this.rest } = props);

classes - это имя свойства, которое мы получаем из props;this.classes - это имя переменной, которой она назначается.С this.rest нам, очевидно, не нужно называть исходное имя свойства.

Демо:

function Foo(props) {
    ({ classes: this.classes, ...this.rest } = props);
}

const props = {
  classes: 'some clases',
  a: 'A',
  b: 'B'
}

console.log(new Foo(props));
0 голосов
/ 19 сентября 2019

Один из более хитрых способов - использовать функцию, связанную с желаемым this

. Здесь переименование является ключом, в данном случае он выбирает значение из props и присваивает его тому, что мы переименовываем в

({ classes:this.classes,...this.rest } = props)

Так что это фактически то же самое, что и

this.classes = props.classes;
this.rest = all the properties expect those which are already destrucutred

Вы можете вставить свой код здесь и увидеть упрощенную версию Babel


const props = {
  classes: 'some clases',
  a: 'A',
  b: 'B'
}

let tempThis = {}
console.log(tempThis)

let getMeValuesOnThis = function(props) {
  ({ classes:this.classes,...this.rest } = props)
}.bind(tempThis)

getMeValuesOnThis(props)

console.log('---values after function execution---')
console.log(tempThis)

ray уже предложил способ сделать это, используя Object.assign в комментариях

...